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