如何用border-image实现文字气泡边框的示例代码


Posted in HTML / CSS onJanuary 21, 2020

开发活动中,遇到了一个很简单的文字气泡效果,大概就是这样的。

如何用border-image实现文字气泡边框的示例代码

emmmm,看起来很简单。实现思路如下

  • 主体是个div,加上渐变和边框还有圆角即可。
  • 左侧元宝切图,用::before定位在左侧。
  • 右侧老鼠切图,用::after定位在右侧。

基本没啥难度,分分钟就能搞定了。直到...

产品:哦对了,这个气泡图后面要在后台做成可配置的,到时候我们直接上传图片就行了,算是用户的个人签名。 我:!!!(??□′)?︵┻━┻

这就有点尴尬了,总不能到时候让产品也一张图片before,一份after,中间渐变自己写吧。估计分分钟会被自己砍死的。

早年在公司听安卓的同事讲过一种叫做.9png的东西,于是在网上搜了下,前端能不能实现类似的效果。果然发现了。

.9png

什么是.9png呢?.9png是安卓那边的一种图片格式,专门用来做气泡效果的。它的特点就是把一份图片分成9分,最角落的四个区域是不会被拉伸的。只会拉伸中间部分。

如何用border-image实现文字气泡边框的示例代码

这样就算你的内容区域撑大了,角落保留的元素不会发生形变。

前端实现

聪明的同学可以直接戳这里看效果 https://codepen.io/gong12339/pen/PowxmzL

前端实现.9png需要用到以下几个属性。

官方推荐的.9png的图分辨率是81 * 81,这样切出来的9个区域每一个都是27 * 27的宽高。我这里因为是长方形,所以切片的位置需要自己测量。而且我的图片很明显不支持纵向拉伸

.border {
  border-width: 18px 44px 25px 28px;
  border-style: solid;
  border-image-source:url(https://raw.githubusercontent.com/gong12339/vic-blog/master/static/img/border.9.png);
  border-image-slice:25 44 25 28 fill;
  border-image-width:25px 44px 25px 28px;
}
  • border-width: 27px; 设置边框宽度
  • border-style: solid; 设置边框类型
  • border-image-source: url('a.png')
  • 设置图片地址,没啥好讲的
  • border-image-slice: 27 27 27 27;
  • 设置切片位置 (上 右 下 左),如果都一样也可以只写一个
  • border-image-width: 27px 27px 27px 27px;
  • 设置边框宽度(上 右 下 左),如果都一样也可以只写一个

这里重点讲一下 border-image-slice ,它的意思就是距图片的上、右、下、左相应的距离画条线,然后将图片切成9个区域(注意不能带单位)。

如何用border-image实现文字气泡边框的示例代码

到这里我们已经基本完成了配置

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 中实现炫酷的loading效果
Apr 26 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 #HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 #HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 #HTML / CSS
Grid 宫格常用布局的实现
Jan 10 #HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 #HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 #HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 #HTML / CSS
You might like
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
用来给图片加水印的PHP类
2008/04/09 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
2020/09/04 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python实现统计代码行的方法分析
2017/07/12 Python
python学生管理系统开发
2019/01/30 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
银行领导证婚词
2014/01/11 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
开学典礼主持词
2014/03/19 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
超市收银员岗位职责
2015/04/07 职场文书
防暑降温通知书
2015/04/27 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android