好的，下面是关于 CSS 中 box-shadow 属性的详解，包含语法、参数解释、使用技巧和常见示例，助你完全掌握这个常用于实现投影效果的属性。

✅ box-shadow 详解（CSS 盒子阴影）

一、基本语法

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩展半径] [颜色] [inset];

各参数含义：

参数说明
水平偏移必填，阴影在水平方向上的距离。正值向右，负值向左
垂直偏移必填，阴影在垂直方向上的距离。正值向下，负值向上
模糊半径可选，阴影的模糊程度。数值越大越模糊
扩展半径可选，阴影的大小扩展或收缩（正值扩展，负值收缩）
颜色可选，阴影的颜色（支持RGBA/透明度）
inset可选，表示内阴影，省略表示外阴影

二、常见写法示例

1. 简单阴影（外阴影）

box-shadow: 5px 5px 10px gray;

表示：向右下偏移5px，模糊半径10px，阴影为灰色。

2. 带扩展半径的阴影

box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.3);
  • 多出一个“5px”，是扩展半径。
  • 阴影面积更大，颜色半透明。

3. 内阴影（inset）

box-shadow: inset 0 0 10px red;
  • 阴影在元素内部，呈现内凹效果。

4. 多重阴影（用逗号分隔）

box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.3);
  • 可叠加多个阴影形成立体感，如玻璃、凹凸按钮等。

三、完整案例

<div class="card">卡片内容</div>

<style>
.card {
  width: 200px;
  height: 100px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 20px;
}
</style>

效果：卡片式UI的轻盈阴影，常用于现代网页设计中。

四、实用设计技巧

目的建议 box-shadow 写法
卡片式设计box-shadow: 0 4px 12px rgba(0,0,0,0.1);
悬浮感按钮box-shadow: 0 2px 4px rgba(0,0,0,0.2);
内凹效果（按下）box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
霓虹边框box-shadow: 0 0 10px #0ff;
多层渐变感多重 box-shadow，例如 Neumorphism 风格

五、注意事项

  • box-shadow 不会占据空间，只是视觉效果。
  • 阴影可受 border-radius、overflow 的影响。
  • 在 transform: scale 或 filter 中叠加阴影需注意性能开销。

六、兼容性

  • box-shadow 已被所有主流浏览器支持（IE9+）。
  • 旧版本IE（<9）不支持，可使用 filter: progid:DXImageTransform... 作为替代。