好的，我们来详细拆解一下 CSS box-shadow，不仅讲语法，还会配上视觉效果和一些常见技巧。

1. 基本语法

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

参数解释：

参数必填作用
offset-x✅阴影的水平偏移量（正数向右，负数向左）
offset-y✅阴影的垂直偏移量（正数向下，负数向上）
blur-radius❌模糊半径（越大越模糊，默认 0）
spread-radius❌阴影扩散半径（正数放大，负数缩小，默认 0）
color❌阴影颜色（支持透明度，例如 rgba(0,0,0,0.5)）
inset❌改为内阴影（默认外阴影）

2. 最常见示例

外阴影

.box {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
  • 10px → 向右偏移 10 像素
  • 10px → 向下偏移 10 像素
  • 20px → 模糊半径
  • rgba(0,0,0,0.3) → 半透明黑色

内阴影

.box {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
  • inset → 阴影在元素里面，类似“凹陷”效果

多重阴影

.box {
  box-shadow: 
    0 0 10px red, 
    0 0 20px blue;
}
  • 多个阴影用 逗号 分隔
  • 可以叠加发光效果

3. 动画/悬停效果

.box {
  transition: box-shadow 0.3s ease;
}
.box:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
  • 鼠标悬停时阴影变大，常用于按钮、卡片的悬停效果

4. 常用效果配方

效果代码
卡片浮起box-shadow: 0 4px 20px rgba(0,0,0,0.1);
柔和发光box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
凹陷按钮box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), inset -2px -2px 5px rgba(255,255,255,0.8);
霓虹灯box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;

5. 兼容性

  • 现代浏览器都支持 box-shadow
  • IE9+ 才支持（IE8 及更早版本不行）
  • 不需要前缀（以前需要 -webkit-box-shadow）

💡 小技巧：

  • 阴影颜色尽量用 rgba 控制透明度，比纯黑柔和
  • 模糊半径和扩散半径配合使用，可以做出立体感
  • 多重阴影可以模拟发光、立体浮雕、内外层阴影等效果