如何用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 相关文章推荐
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
javascript轮播图算法
2016/10/21 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
C语言编程练习
2012/04/02 面试题
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
应届生求职自荐信
2014/07/04 职场文书
二人合伙经营协议书
2014/09/13 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
教师个人成长总结
2015/02/11 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
刑事撤诉申请书
2015/05/18 职场文书
经典祝酒词大全
2015/08/12 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis