CSS 阴影

使用方法

1. 设置主阴影层的水平/垂直偏移、模糊半径与扩散半径。
2. 选择半透明颜色；复制层以区分环境光与主光，层次更自然。
3. 复制合并后的声明到样式表，并在浅色/深色主题下核对对比度与聚焦可见轮廓，满足可及性要求。

常见问题

什么时候用 inset（内阴影）？

内阴影表示元素压入表面，常用于输入框凹槽、拨杆轨道等。外阴影表达“浮起”；叠加时避免模糊过大导致发灰。

模糊半径过大是否影响性能？

超大模糊在低端手机上会消耗 GPU。优先使用设计体系中的层次令牌，或改为在伪元素上过渡透明度，而非剧烈拉长模糊。

动画里如何平滑过渡阴影？

模糊过渡代价高，常见做法是过渡 `transform`/`opacity` 或换用 `filter: drop-shadow()`；与团队动效规范保持一致。