如何用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实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 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
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python set集合类型操作总结
2014/11/07 Python
Python实现定时任务
2017/02/08 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python 多线程的实例详解
2017/09/07 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python创建文件备份的脚本
2018/09/11 Python
python try except 捕获所有异常的实例
2018/10/18 Python
NumPy中的维度Axis详解
2019/11/26 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
领导干部考察材料
2014/02/08 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python