时间:2021-05-08
开发活动中,遇到了一个很简单的文字气泡效果,大概就是这样的。
emmmm,看起来很简单。实现思路如下
基本没啥难度,分分钟就能搞定了。直到...
产品:哦对了,这个气泡图后面要在后台做成可配置的,到时候我们直接上传图片就行了,算是用户的个人签名。 我:!!!(╯‵□′)╯︵┻━┻
这就有点尴尬了,总不能到时候让产品也一张图片before,一份after,中间渐变自己写吧。估计分分钟会被自己砍死的。
早年在公司听安卓的同事讲过一种叫做.9png的东西,于是在网上搜了下,前端能不能实现类似的效果。果然发现了。
.9png
什么是.9png呢?.9png是安卓那边的一种图片格式,专门用来做气泡效果的。它的特点就是把一份图片分成9分,最角落的四个区域是不会被拉伸的。只会拉伸中间部分。
这样就算你的内容区域撑大了,角落保留的元素不会发生形变。
前端实现
聪明的同学可以直接戳这里看效果 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-image-slice ,它的意思就是距图片的上、右、下、左相应的距离画条线,然后将图片切成9个区域(注意不能带单位)。
到这里我们已经基本完成了配置
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
边框:(Borders)border-color:控制边框颜色,并且有了更大的灵活性,可以产生渐变效果border-image:控制边框图象border-cor
之前总结了下如何用css来实现table的border+bordercolordark+bordercolorlight的边框明暗效果,然后有网友问我为什么他写
最近在项目中用到了border-image,一直是只知其名,不知其用。最终效果是这样的:且随着border宽度变化。下图灰色部分带斜纹的是border先看下cs
下面给出一个示例:复制代码代码如下:.Image{max-width:600px;height:auto;cursor:pointer;border:1pxda
半透明边框实现效果:实现代码:你能看到半透明的边框吗?div{border:10pxsolidrgba(255,255,255,.5);back