[CSS揭秘]规则投影

背景知识

box-shadow

第三个参数是模糊半径，使用高斯模糊算法进行模糊处理。本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过渡长度近似于模糊半径的两倍。

第四个参数是扩张半径，会根据指定的值扩大或者缩小投影的尺寸。宽度和高度分别扩张或者减少两倍的扩张半径。

单侧投影

如果给一个负的扩张半径，其数值又刚好等于模糊半径，那么投影尺寸就会与投影元素的尺寸完全一致，如果没有设定偏移量就会完全看不到任何投影。也就是说如果想在哪一边进行投影，只需要在那一边进行偏移即可。

邻边投影

扩张半径设置为模糊半径的一半，同时相邻两边的偏移量设置为大于或等于模糊半径的一半。

双侧投影

将单侧投影重复一次即可

 

案例

1. 单侧投影

box-shadow: 0 10px 8px -8px black;

 

2. 邻边投影

box-shadow: 10px 10px 8px -4px black;

 

3. 双侧投影

box-shadow: 10px 0 10px -10px black, -10px 0 10px -10px black;