之前做过很多特殊的布局,比如在这两篇文章 CSS 实现优惠券的技巧 、CSS 实现支持渐变的提示框(tooltips),如下
但是一直有一个痛点就是:无法给这些图形加上边框
今天带来一个小技巧:利用 drop-shadow
一行代码搞定所有不规则边框
这里需要利用投影 drop-shadow
, 不太了解的可以参考 这篇文章: 被低估的CSS滤镜:drop-shadow,这里简单介绍一下
语法其实很简单
filter: drop-shadow(offset-x offset-y blur-radius color)
并不是一个单独的属性,而是 filter 滤镜下的一个方法
这里 offset-x
、 offset-y
为偏移量,blur-radius
为模糊半径,color
为投影颜色。实际作用就是可以模拟真实世界的投影(透明的部分不会投影),区别如下
可惜的是,虽然和 box-shadow 比较类似,但是少了扩展半径。试想一下,如果支持了扩展半径,那不规则边框是不是很容易了(应该不会支持了,因为真实世界的投影也没有扩展半径)?
那么,drop-shadow
如何生成边框呢?
box-shadow 可以很轻易的实现多重阴影
box-shadow: 0 0 3px #333, 1px 1px 5px #666, ...
可以无限叠加下去。
但是,drop-shadow可就不行了,比如
filter: drop-shadow(0 0 3px #333, 1px 1px 5px #666, ...)
可以看到浏览器直接认为非法了
不过可以换一种思路,虽然 drop-shadow
不支持,但是filter
支持多种滤镜,所以可以这样来实现
filter: drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333)...
这样就可以生效了
是不是有点像边框了?如果只设置 0.5px 的模糊,多叠加几次,模糊的部分会变清晰,这个就有点像一个比较软的笔触,多画几笔就变清晰了,于是可以得到这样的效果
这样就更加接近了,实践下来,可能需要微调,这里给出一个比较完美的方案(重点来了~)
.wrap{
filter: drop-shadow(0px 0px 0.5px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333)
}
这样实现的边框已经足够清晰,基本可以日常使用了
这段代码中颜色比较多,可以优化一下,投影的颜色默认是跟随当前文字颜色的,所以可以简化为
.wrap{
filter: drop-shadow(0 0 0.5px)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0);
color: #333;
}
线上示例可访问 coupon-border,还有这个 tooltips-border
使用方式简单,在容器的最外层加上这一行 CSS 就行了,比如之前的优惠券例子,得到的边框效果这样的
还有这样的
边框还算不错,几乎看不出投影
不过这里需要注意的是,经过 mask 裁剪的图形需要在外层嵌套一层父级,不然投影会被 mask 直接裁剪掉
<div class="wrap">
<div class="coupon">
<!--优惠券-->
</div>
</div>
另外,这个方案进适合比较小的边框,如果较大的边框,可能会比较圆滑,而且需要叠加更多的滤镜,效果也不太好,如下
这些就需要自行取舍了(一般情况下不会有太粗的边框)
本文介绍了一个实现不规则边框的通用方案,成本非常低,效果也非常不错,这里总结一下:
可能大部分同学最后可能还是会选择 “切图.png”,不过这也算是一个解决方案 ,多一种方案总是没错的。最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发???
Props 到目前为止,我们只处理内部状态,也就是说,只能在给定的组件中访问这些...
在下不才,归纳几点html编码要素,望能指点各位: 1.文字本身的大小不兼容。同样...
本文首发公众号「 前端从进阶到入院 」,欢迎关注! 最近看到阿里前端技术专家狼...
欢迎关注我的微信公众号【 Java3y 】来聊聊Java面试 【对线面试官】系列 一周两...
TOP云(zuntop.com)科技9月13日报道,在“互联网+”时代,大数据很能反应出一些...
深度学习技术方兴未艾,新一轮AI的开发与应用,如火如荼。在全球范围内,开源项...
最近做一个刮刮卡,需要将文字在canvas中水平、垂直居中 wxml canvas type='2d' ...
前言 看了Bloc源码后,心情有点复杂呀。。。 说点积极的... 用过Bloc的靓仔们,...
好~设计大师,或者也太吹牛了吧,但根据下面七个基本原则至少你可以成为一个熟练...
随着用户越来越关注隐私并越来越注意防止在线跟踪,用户开始使用广告拦截器和脚...