CSS中的box-shadow和-moz-box-shadow详解

基础概念

box-shadow是CSS3标准属性，用于在元素框周围添加一个或多个阴影效果。而-moz-box-shadow是Firefox浏览器在CSS3标准确立前实现的前缀版本。

标准属性：box-shadow

语法

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color] [inset];

参数解释

• horizontal offset (必需)：水平阴影位置，正值向右，负值向左
• vertical offset (必需)：垂直阴影位置，正值向下，负值向上
• blur radius (可选)：模糊距离，值越大越模糊，0表示无模糊
• spread radius (可选)：阴影尺寸，正值扩大，负值缩小
• color (可选)：阴影颜色，默认与文本颜色相同
• inset (可选)：将外部阴影改为内部阴影

示例代码

div {
  box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
  /* 水平偏移5px，垂直偏移5px，模糊10px，无扩展，半透明黑色 */
}

前缀属性：-moz-box-shadow

历史背景

在CSS3标准化过程中，浏览器厂商会为实验性功能添加前缀：

• -moz-：Firefox (Mozilla)
• -webkit-：Chrome/Safari
• -ms-：Internet Explorer
• -o-：Opera

-moz-box-shadow是Firefox在早期实现的box-shadow版本。

现代使用建议

现代浏览器(包括Firefox)已全面支持无前缀的box-shadow，不再需要-moz-box-shadow。除非需要支持非常旧的Firefox版本(如Firefox 3.6及更早)，否则不应再使用前缀版本。

优势

1. 视觉效果：无需图片即可创建阴影效果
2. 性能：比使用图片阴影更高效
3. 灵活性：可动态调整阴影参数
4. 响应式：随元素大小自动调整

应用场景

1. 卡片式设计
2. 按钮悬浮效果
3. 模态框/弹出层
4. 视觉层次感创建
5. 内阴影实现压按效果

常见问题及解决方案

问题1：阴影不显示

原因：

• 元素没有宽度/高度
• 使用了display: inline(阴影需要块级元素)

解决：

div {
  display: inline-block; /* 或block */
  width: 100px;
  height: 100px;
  box-shadow: 2px 2px 5px grey;
}

问题2：阴影模糊效果不一致

原因：不同浏览器对模糊算法的实现略有差异

解决：使用标准属性并测试主要浏览器

问题3：阴影性能问题

原因：过多或过于复杂的阴影会影响渲染性能

解决：

• 减少阴影数量
• 简化模糊半径
• 对动画元素谨慎使用阴影

高级用法示例

多重阴影

div {
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1);
}

内阴影

div {
  box-shadow: inset 0 0 10px #000000;
}

特殊形状阴影

div {
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

在现代Web开发中，应始终优先使用无前缀的box-shadow属性，除非有特殊兼容性需求。