盒阴影

CSS3 的盒阴影功能提供了一种为元素添加阴影效果的简单方式。通过 box-shadow 属性，我们可以创建各种阴影效果，增强元素的立体感和层次感，创建更加丰富和美观的界面设计。

box-shadow 属性

box-shadow 属性用于为元素添加阴影效果。

基本语法

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

参数说明

• offset-x：阴影的水平偏移量（必需）
• offset-y：阴影的垂直偏移量（必需）
• blur-radius：阴影的模糊半径（可选）
• spread-radius：阴影的扩展半径（可选）
• color：阴影的颜色（可选）
• inset：内部阴影（可选）

基本用法

/* 基本阴影 */
.basic {
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}

/* 简单阴影 */
.simple {
  box-shadow: 5px 5px 0 #000;
}

/* 模糊阴影 */
.blur {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 扩展阴影 */
.spread {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
}

/* 内部阴影 */
.inset {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

实际应用案例

1. 卡片阴影

/* 卡片阴影 */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: white;
  padding: 20px;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

2. 按钮阴影

/* 按钮阴影 */
.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
}

3. 浮动效果

/* 浮动效果 */
.floating {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  background: white;
  padding: 20px;
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
  }
}

4. 发光效果

/* 发光效果 */
.glow {
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: #007bff;
}

.glow:hover {
  box-shadow: 0 0 40px rgba(0, 123, 255, 0.8);
}

5. 立体按钮

/* 立体按钮 */
.three-d-button {
  box-shadow: 0 4px 0 #0056b3, 0 5px 10px rgba(0, 0, 0, 0.3);
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.three-d-button:active {
  box-shadow: 0 2px 0 #0056b3, 0 3px 6px rgba(0, 0, 0, 0.3);
  transform: translateY(2px);
}

高级技巧

1. 多重阴影

/* 多重阴影 */
.multiple {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 彩虹阴影 */
.rainbow {
  box-shadow:
    0 0 10px rgba(255, 0, 0, 0.5),
    0 0 20px rgba(0, 255, 0, 0.5),
    0 0 30px rgba(0, 0, 255, 0.5);
}

2. 内外阴影组合

/* 内外阴影组合 */
.combined {
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.3),
    0 4px 6px rgba(0, 0, 0, 0.1);
}

3. 渐变阴影

/* 渐变阴影 */
.gradient-shadow {
  box-shadow:
    0 0 10px rgba(0, 123, 255, 0.3),
    0 0 20px rgba(0, 123, 255, 0.2),
    0 0 30px rgba(0, 123, 255, 0.1);
}

4. 文字阴影与盒阴影结合

/* 文字阴影与盒阴影结合 */
.text-box-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 20px;
  background: white;
  border-radius: 12px;
}

性能优化

1. 避免过度使用

/* 推荐 - 适度使用 */
.optimized {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 不推荐 - 过度使用 */
.overused {
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(0, 0, 0, 0.1),
    0 0 30px rgba(0, 0, 0, 0.1),
    0 0 40px rgba(0, 0, 0, 0.1),
    0 0 50px rgba(0, 0, 0, 0.1);
}

2. 使用硬件加速

/* 硬件加速 */
.hardware-accelerated {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateZ(0);
  will-change: transform;
}

3. 优化动画

/* 优化动画 */
.animated {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.animated:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

浏览器兼容性

CSS3 盒阴影在所有现代浏览器中都有良好的支持：

• box-shadow：Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 9+
• 需要浏览器前缀：-webkit-、-moz-（旧版本）

最佳实践

1. 合理使用阴影

/* 推荐 - 合理使用阴影 */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 不推荐 - 过度使用阴影 */
.heavy-shadow {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

2. 提供降级方案

/* 推荐 - 提供降级方案 */
.element {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 不推荐 - 不提供降级方案 */
.element {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

3. 考虑性能

/* 推荐 - 考虑性能 */
.optimized {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 不推荐 - 影响性能 */
.non-optimized {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  filter: blur(10px);
}

4. 保持一致性

/* 推荐 - 保持一致性 */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 不推荐 - 不一致 */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

总结

CSS3 盒阴影提供了强大的阴影效果能力：

主要属性：

• box-shadow：盒阴影
• offset-x：水平偏移
• offset-y：垂直偏移
• blur-radius：模糊半径
• spread-radius：扩展半径
• color：阴影颜色
• inset：内部阴影

阴影类型：

• 外部阴影
• 内部阴影
• 多重阴影
• 渐变阴影

实际应用：

• 卡片阴影
• 按钮阴影
• 浮动效果
• 发光效果
• 立体按钮

最佳实践：

• 合理使用阴影
• 提供降级方案
• 考虑性能
• 保持一致性
• 优化动画

优势：

• 增强立体感
• 提升层次感
• 改善视觉效果
• 简化开发
• 增强设计感

注意事项：

• 浏览器兼容性
• 性能影响
• 过度使用
• 一致性
• 可访问性

掌握 CSS3 盒阴影，能够让我们创建更加丰富和美观的界面设计，大大提升网页的视觉效果和用户体验。