如何用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 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
html读出文本文件内容
2007/01/22 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Mac安装python3的方法步骤
2019/08/09 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
Python爬虫教程知识点总结
2020/10/19 Python
金士达面试非笔试
2012/03/14 面试题
股东出资证明书范例
2014/10/04 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers