好的阿杰，我帮你整理一份 CSS3 box-shadow 阴影的使用与技巧总结，涵盖基本语法、常用效果和实用技巧。

🎨 CSS3 阴影属性 box-shadow 使用与技巧

一、基本语法

box-shadow: offset-x offset-y blur-radius spread-radius color inset;
参数含义
offset-x阴影水平偏移（必填，负值向左）
offset-y阴影垂直偏移（必填，负值向上）
blur-radius模糊半径（可选，默认 0）
spread-radius阴影扩展半径（可选，默认 0）
color阴影颜色（可选，默认元素文本颜色）
inset内阴影，可选，默认为外阴影

示例：

div {
    width: 200px;
    height: 100px;
    background: #f0f0f0;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

二、常用阴影类型

1. 外阴影（默认）

  • 阴影出现在元素外部
box-shadow: 5px 5px 15px rgba(0,0,0,0.5);

2. 内阴影（inset）

  • 阴影出现在元素内部，制造凹陷效果
box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);

3. 多重阴影

  • 用逗号分隔，可以叠加多个阴影效果
box-shadow: 2px 2px 5px rgba(0,0,0,0.3),
            0 0 10px rgba(255,0,0,0.5);

三、常用技巧

1. 模拟发光效果

box-shadow: 0 0 10px rgba(255,255,0,0.8);
  • 常用于按钮、提示框发光效果

2. 阴影渐变

  • 结合透明度和模糊半径实现柔和阴影
box-shadow: 0 4px 20px rgba(0,0,0,0.2);

3. 按钮点击凹陷效果

button {
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}
button:active {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

4. 卡片悬浮效果

.card {
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: box-shadow 0.3s ease;
}
.card:hover {
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

5. 内外阴影结合

div {
    box-shadow: 0 4px 10px rgba(0,0,0,0.3),
                inset 0 2px 5px rgba(0,0,0,0.2);
}
  • 可实现立体边框或凹凸效果

四、性能优化建议

  1. 阴影数量不要过多，尤其在移动端。
  2. 尽量使用 rgba 而不是 opacity 叠加多个阴影，减少重绘。
  3. 配合 transform: translateZ(0) 可启用 GPU 加速，提高动画流畅度。

💡 总结

  • box-shadow 是 CSS3 强大的视觉效果工具
  • 支持外阴影、内阴影、多重阴影和动画变化
  • 熟练掌握偏移、模糊、扩展、颜色组合，可打造按钮、卡片、浮动效果、发光提示等多种 UI 风格