border，box-shadow，outline
效果图.png
上述内容的代码
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
多重边框
实际工作中可能会有需要多重边框的场景，这个时候有几个方法可以使用。
outline
不过这个方法没法实现圆角
outline的位置.png
还可以使用outline-offset偏移outline-offset（注意，这个offset可以是负数）
outline-offset
当然你应该注意到outline并不在盒模型中
box-shadow
box-shadow示意图.png
当然还有其他方式实现多边框
box-shadow: 0 5px 5px #000;
前面三个长度值，再加一个颜色值。
前两个长度值分别表示投影在水平和垂直方向上的偏移量，第三个长度值表示投影的模糊半径（也就是模糊的程度）；颜色值就是投影的颜色。
如果我们把前三个值都设为零，实际上是没有任何效果的。因为如果投影即不偏移也不模糊，刚好会被这个元素自己严严实实地遮住。
box-shadow的第四个长度
很多人可能不知道的是，投影还可以有第四个长度值。这个值表示投影向外扩张的程度：
box-shadow: 0 0 0 10px #FF0000;
box-shadow第四个长度
box-shadow可以接受一个列表(多边框)
box-shadow:
0 0 0 10px #FB0000,
0 0 0 20px #FBDD00,
0 0 0 30px #00BDFB;
box-shadow列表
注意事项
由于描边和投影都是不影响布局的，所以如果这个元素和其它元素的相对位置关系很重要，就需要我们以外边距等方式来为这些多出来的 “边框” 腾出位置，以防被其它元素盖住。
实战内凹圆
目标效果图
参考资料详情可以看这个，我发现这个兼容性不是很好就鸽了。
网友评论