24. 多重边框

[inkkk]

多重边框

box-shadow可以向一个元素添加一个或多个阴影，可以一定程度上代替border

语法

box-shadow: h-shadow v-shadow blur spread color inset;

参数解释

• h-shadow： 必须， 水平阴影位置
• v-shadow： 必须， 垂直阴影位置
• blur： 可选，模糊距离
• spread： 可选，阴影的尺寸
• color: 可选， 阴影的颜色
• inset: 可选，将外部阴影 (outset) 改为内部阴影。

需要注意的是当使用多层投影时box-shadow是层层叠加的。第一层的提议那个位于最顶层，以此类推。比如说，第一层阴影已经有了10px的外框，如果想在外圈在加5px的外框，需要指定的扩张半径为10+5 15px

outline

如果你只需要两层边框，那也可以先用border设置一层边框，然后再加上outline描边，outline描边还有一个好处就是可以指定outline-offset控制元素与边缘之间的距离，还可以实现虚线边框的效果。需要注意的是，这种方式只适用于双层边框场景，还有一点边框不一定会贴合border-radius属性产生的圆角边框