CSS Box Shadow 工作原理

CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以设置多个效果，用逗号分隔。一个标准的 box-shadow 包含以下参数：

常见设计风格与应用场景

通过增加 Y 轴偏移和模糊半径，模拟物体被“抬起”的视觉效果，常用于按钮或 Card 组件的 Hover 态。

结合亮色和暗色两个投影（一个左上，一个右下），在平面上创造出凸起或凹陷的软浮雕效果。

使用多层低透明度阴影叠加，创造极其细腻、自然的阴影，常见于现代 Apple 或 Stripe 风格的设计中。

利用 inset 属性，常用于输入框 (Input) 的 Focus 状态或按压按钮的效果。

如何创建“自然”的平滑阴影？

自然的阴影通常由多层阴影叠加而成。你可以添加 2-3 层阴影，每层的模糊度逐渐增加，透明度逐渐降低，从而模拟真实光线的衰减效果。

Box Shadow 会影响网页性能吗？

大面积或高模糊半径的阴影渲染成本较高，尤其是在移动设备上。如果页面出现卡顿，建议减少阴影层数与模糊半径，或尽量避免在动画中使用复杂的 box-shadow 过渡。

Inset 阴影有什么用途？

Inset 将阴影渲染在元素内部。常用于表单输入框（增加深度感）、按钮按下状态、或者制作类似相框、内嵌面板的效果。

为什么我的阴影看起来很“脏”？

直接使用纯黑色 (#000000) 并降低透明度容易导致阴影显得生硬和脏。建议使用带有色相的深色（如深蓝、深紫）作为阴影颜色，会更通透自然。

Spread 半径可以是负数吗？

可以。负的 Spread 值会缩小阴影尺寸。配合较大的 Blur 值，可以制作出一种“悬浮且远离边缘”的独特阴影效果，这是 CSS 阴影的一大技巧。

Box Shadow 支持哪些颜色格式？

支持所有 CSS 颜色格式，包括 Hex, RGB, RGBA, HSL, HSLA 以及颜色关键字。为了控制透明度，最常用的是 RGBA 或 HSLA。

Box Shadow 会占据布局空间吗？

不会。Box Shadow 绘制在元素边框之外，不会影响文档流（Layout），也不会增加元素的实际宽高。如果阴影很大可能被父容器 overflow:hidden 裁剪。

旧版浏览器兼容性如何？

现代浏览器（Chrome, Firefox, Safari, Edge）均完美支持 box-shadow。只有非常古老的 IE8 及以下版本不支持，现在开发通常无需考虑前缀。