CSS揭秘之《多重边框》

1、box-shadow还接受第四个参数&＃xff08;称作“扩张半径”&＃xff09;&＃xff0c; 通过指定正值或负值&＃xff0c; 可以让投影面积加大或者减小
2、如果我们想要一道实线边框其实也是可以通过box-shadow来模拟&＃xff0c;原理就是一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值
eg:

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

3、border其实也能实现上述实线效果而且似乎挺简单&＃xff0c;但是box-shadow却是有border无法媲美的功能&＃xff0c;它支持逗号分隔语法&＃xff0c; 我们可以创建任意数量的投影
eg:

box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

4、需要注意的是box-shadow 是层层叠加的&＃xff0c;也就是说如果你想让第二层边框宽度为5的话则必须在第一层边框宽度10的基础上增加5&＃xff0c;也就是最终值为15

div {width: 100px;height: 60px;margin: 25px;background: yellowgreen;box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink,0 2px 5px 15px rgba(0, 0, 0, .6);}

具体效果可见链接
5、投影效果跟边框的效果完全不一致&＃xff0c;

a)投影它不会影响布局&＃xff0c; 而且也不会受到 box-sizing 属性的影响
b)边框会响应鼠标点击事件&＃xff0c;投影出来的边框虽然看上去占据空间大了很多&＃xff0c;但是点击区域范围没有变大(无法响应点击事件可通过因为它不会影响布局&＃xff0c; 而且也不会受到 box-sizing 属性的影响)


6、如果我们要模拟虚线边框的话&＃xff0c;box-shadow 就没辙了&＃xff0c;虽然outline并不支持逗号分隔&＃xff0c;但是可实现虚拟边框&＃xff0c;还可以通过 outline-offset 属性来控制它跟元素边缘之间的间距&＃xff0c; 这个属性甚至可以接受负值
需要注意的是&＃xff1a;边框不一定会贴合 border-radius 属性产生的圆角&＃xff0c; 因此如果元素
是圆角的&＃xff0c; 它的描边可能还是直角的

div {background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;outline-offset: 5px;}