什么是 CSS box-shadow？

box-shadow 是 CSS 中用于给元素添加阴影效果的属性。它可以设置水平偏移、垂直偏移、模糊半径、扩展半径、颜色和是否为内阴影。支持多层阴影叠加，用逗号分隔即可。

如何实现多层阴影效果？

在 box-shadow 属性中用逗号分隔多个阴影值即可。每层阴影独立控制偏移、模糊、颜色等参数。多层叠加可以模拟更自然的光影效果，如Material Design中的elevation效果。

添加 inset 关键字后，阴影会出现在元素内部，常用于模拟凹陷效果、输入框聚焦状态、按压按钮效果等。内阴影与外阴影可以同时使用，互不影响。

阴影颜色推荐使用rgba格式来控制透明度，这样阴影效果更自然。纯黑色阴影通常不需要100%不透明度，10%-40%的透明度最为常用。本工具通过滑块独立控制透明度，方便调整。

可视化配置 CSS box-shadow 属性，支持多层阴影叠加，实时预览并复制代码

快速预设：

阴影层 1

X 偏移

0px

Y 偏移

4px

模糊半径

10px

扩展半径

0px

颜色

透明度25%

内阴影 (inset)

box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);