CSS小技巧---box-shadow

本文介绍使用box-shadow实现一下几种效果

• 实现一个边框
• 多重投影模拟多层边框

首先回顾一下box-shadow语法
box-shadow: h-shadow v-shadow blur spread color inset;

属性	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小，扩张半径
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

模拟实现一个边框

核心是设置box-shadow到扩张半径，控制边框大小。其实现效果和设置border一致

background-color: saddlebrown;
box-shadow: 0 0 0 10px coral;

多重投影实现多层边框

box-shadow支持逗号分隔语法，可以创建任意数量多投影，多层投影是相互叠加的效果，如想要给第2层边框宽度设置为15px，那么实际要设置成上一层10px+15px=25px。如下图所示

缺陷说明：使用box-shadow设置的边框不会响应鼠标事件，不过可以通过设置inset属性，将投影模式改内内嵌解决