[css 揭秘]：CSS揭秘 技巧：多重边框

Posted 2020-08-31

我的github地址：https://github.com/FannieGirl/ifannie/

源码都在这上面哦！

喜欢的给我一个星吧

多重边框

问题：我们通常希望在css代码层面以更灵活的方式来调整边框样式

方案一：box-shadow

目前为止，我们大多数人可能已经用过（或者滥用过）box-shadow来生成投影，不太为人之的是，它还接受四个参数（扩张半径），通过制定正值或负值，可以让投影面积加大或者减小,

用它的好处是它支持逗号分隔语法，我们可以创建任意数量的投影

知识背景：box-shadow 属性向框添加一个或多个阴影。
提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

语法：box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

创建多重边框，代码如下

效果图：

实例演示地址：https://jsfiddle.net/Fannie/06sjmL6n/5/

方案二：outline

在某种情况下，你可能只需要两层边框，那就可以设置一层常规边框，再加上outline（描边） 属性来产生外层的边框，这种方法的优点是边框的样式十分灵活，不像上面的box-shadow方案 模拟实线边框（假设我们需要的产生虚线边框效果，box-shadow 就不可做到）

知识背景：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。

语法：outline：outline-color outline-style outline-width inherit

outline-color 规定边框的颜色。
outline-style 规定边框的样式。
outline-width 规定边框的宽度。
inherit 规定应该从父元素继承 outline 属性的设置。

创建多重边框，代码如下

效果对比图

实例演示地址：https://jsfiddle.net/Fannie/06sjmL6n/6/

还想说一点的是改变outline-offset值，可以实现很简单的缝边效果

是不是很奇妙！（就我这个智障这样想吧！），我想说的是多去思考，多去尝试，一切皆有可能啊！
这种outline方案，只适合双层边框的场景，outline不接受用逗号分隔多个值，边框不一定会贴合border-radius 属性产生的圆角，因此如果元素是圆角，它的描边可能是直角的。在绝大多数的情况下，描边都是矩形的。

后言：
如果你对基础的知识点已经很熟悉，你可以自动跳过。写上去的原因是查漏补缺，巩固一下基础。
如果有不对的地方，欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school；
参考链接 ：http://www.w3school.com.cn/cssref/pr_background-clip.asp