css 多重边框

来源：图艺博知识网

方案一 :

目前为止，我们大多数人可能已经用过box-shadow 来生成投影。不太为人所知的是，它还接受第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框。

这也没啥了不起的，但是，box-shadow支持逗号分割语法，支持我们创建多个投影。看语法:

因此，根据此原理我们就可以实现多重边框啦！

这里有一个注意点，box-shadow是层层叠加的，第一层投影位于最上层，以此类推。所以，当你用

box-shadow 添加了一个10px的边框后，你还想添加一个10px的边框，那么扩张半径（spread属性）就得是20px。

另外box-shadow模拟的边框，跟实际的边框不同，不会受到box-sizing的影响，不过你也可以通过添加内边距或者外边距来模拟出边框占据的空间！

此边框同样也不能影响鼠标点击事件，但是你可以加上inset关键字的同时，增加额外的内边距来达到点击效果。

方案二 :

在某些情况你可能只需要两层边框，那么你可以先设置一层常规边框，在加上outline属性来产生额外的一层边框！（这种方案的好处在于能够实现虚线的边框，这是box-shadow无法实现的）

先看语法 :

描边的另一个好处就是你可以通过outline-offset属性控制它跟元素边缘之间的距离，该属性可以接受负值，例如:

outline不支持逗号分割语法，因此多层边框就只能依靠box-shadow啦！

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文