box-shadow属性的第四个参数扩张半径还可以接受负数。指定为负数时,它会相应的缩小投影的尺寸。一个-5px的扩张半径会让投影的4个边都减少5px的大小。所以,当模糊半径的大小与扩张半径的大小相互抵消(一个为正一个为负,绝对值相等),并且X与Y方向的偏移量都为0时,将完全看不到投影。利用这一特点,只给X或者Y起中一个方向给偏移量,就可以实现单侧投影。
box-shadow: 0 10px 10px -10px rgba(0,0,0,.8);
![](https://img.haomeiwen.com/i5121845/2ded3bb8b8e7e00f.png)
当扩张半径为模糊半径的一半且为负值时,可以将相邻的两侧阴影显示,并将另外两侧的阴影隐藏起来。注意此时扩展半径要和偏移量完全抵消才能完全隐藏阴影
box-shadow: 10px 10px 20px -10px rgba(0,0,0,.8);
![](https://img.haomeiwen.com/i5121845/f71a07c585f72287.png)
当要实现双侧投影时,因为扩张半径在4个方向上的抵消量都是相同的,所以只用一层阴影无法实现,可以利用两次单侧阴影的技巧,让两个阴影叠加在同一元素上。
box-shadow: 10px 0 10px -10px rgba(0,0,0,.8),
-10px 0 10px -10px rgba(0,0,0,.8);
![](https://img.haomeiwen.com/i5121845/291846ff467d29a0.png)
网友评论