内凹圆实战（border，box-shadow，outline）

2017-04-23 本文已影响22人梁王io

border，box-shadow，outline

效果图.png

上述内容的代码

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

实际工作中可能会有需要多重边框的场景，这个时候有几个方法可以使用。

不过这个方法没法实现圆角

outline的位置.png

还可以使用outline-offset偏移outline-offset（注意，这个offset可以是负数）

outline-offset

当然你应该注意到outline并不在盒模型中

box-shadow示意图.png

当然还有其他方式实现多边框
box-shadow: 0 5px 5px #000;
前面三个长度值，再加一个颜色值。

前两个长度值分别表示投影在水平和垂直方向上的偏移量，第三个长度值表示投影的模糊半径（也就是模糊的程度）；颜色值就是投影的颜色。

如果我们把前三个值都设为零，实际上是没有任何效果的。因为如果投影即不偏移也不模糊，刚好会被这个元素自己严严实实地遮住。

很多人可能不知道的是，投影还可以有第四个长度值。这个值表示投影向外扩张的程度：
box-shadow: 0 0 0 10px #FF0000;

box-shadow第四个长度

box-shadow: 
        0 0 0 10px #FB0000,
        0 0 0 20px #FBDD00, 
        0 0 0 30px #00BDFB;

box-shadow列表

由于描边和投影都是不影响布局的，所以如果这个元素和其它元素的相对位置关系很重要，就需要我们以外边距等方式来为这些多出来的 “边框” 腾出位置，以防被其它元素盖住。

目标效果图

参考资料详情可以看这个，我发现这个兼容性不是很好就鸽了。