CSS中的box-shadow属性详解

一、属性描述
box-shadow属性用于在元素框上添加一个或多个阴影效果，可以创建丰富的视觉效果和层次感。该属性接受多个参数值，分别控制阴影的偏移、模糊、扩散、颜色和内外阴影效果。

二、属性语法详解

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

• inset（可选）：将外部阴影改为内部阴影
• x-offset（必需）：水平偏移量（正值为右，负值为左）
• y-offset（必需）：垂直偏移量（正值为下，负值为上）
• blur-radius（可选）：模糊半径（值越大越模糊，0表示不模糊）
• spread-radius（可选）：扩散半径（正值扩大阴影，负值缩小阴影）
• color（可选）：阴影颜色（默认与文字颜色相同）

三、基础用法逐步解析

1. 最简单的阴影（仅偏移）

.box {
  box-shadow: 5px 5px; /* 右下阴影，使用默认颜色 */
}

2. 添加模糊效果

.box {
  box-shadow: 5px 5px 10px; /* 10px模糊半径 */
}

3. 控制阴影扩散

.box {
  box-shadow: 5px 5px 10px 5px; /* 扩散5px，阴影更大 */
}

4. 自定义阴影颜色

.box {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3); /* 半透明黑色 */
}

四、高级特性详解

1. 内外阴影控制

.box {
  box-shadow: inset 0 0 10px #000; /* 内部阴影 */
}

2. 多重阴影效果

.box {
  box-shadow: 
    0 0 10px red,          /* 外层红色阴影 */
    inset 0 0 10px blue;   /* 内层蓝色阴影 */
}

3. 立体效果实战

.button {
  /* 上亮下暗的立体按钮 */
  box-shadow: 
    inset 0 -2px 4px rgba(0,0,0,0.2),  /* 底部内阴影 */
    inset 0 2px 4px rgba(255,255,255,0.2); /* 顶部内高光 */
}

五、实际应用场景

1. 卡片悬浮效果

.card {
  transition: box-shadow 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 悬浮时阴影加深 */
}

2. 浮雕文字效果

.text {
  color: #666;
  text-shadow: 
    1px 1px 1px #fff,    /* 亮部 */
    -1px -1px 1px #000;  /* 暗部 */
}

六、性能优化注意事项

• 避免过度使用模糊半径（特别是超过20px）
• 多重阴影按性能消耗排序：偏移阴影 < 模糊阴影 < 扩散阴影
• 对动画元素使用阴影时，考虑使用transform替代

七、浏览器兼容性

• 现代浏览器全面支持
• IE9+支持基本语法
• 多重阴影需IE10+

通过合理运用box-shadow的各参数组合，可以创造出丰富多样的视觉效果，是CSS视觉设计中不可或缺的重要属性。