CSS 如何实现单侧投影效果？

Question

CSS 如何实现单侧投影效果？

仓乃文 · Accepted Answer

当需要给元素添加单侧阴影时，可以利用 box-shadow 的扩张半径为负值的特性，配合偏移量实现单侧投影，避免阴影四侧扩散。

```css
.single-shadow {
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.3);
}
```

补充说明：
- 右侧投影：box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.3)
- 左侧投影：box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.3)
- 顶部投影：box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.3)
- 扩张半径必须为负值，且绝对值等于或大于模糊半径，否则阴影会溢出