box-shadow 是 CSS 中用于为元素添加阴影效果的属性，它可以应用于块级元素（如 div）和内联元素。通过 box-shadow，你可以为元素的框（即边框区域）添加一个或多个阴影效果，通常用于增加视觉层次感和深度感。

语法

box-shadow: h-offset v-offset blur-radius spread-radius color inset;

参数详解

  1. h-offset：阴影水平偏移（必需）。
    • 正值：阴影向右偏移。
    • 负值：阴影向左偏移。
  2. v-offset：阴影垂直偏移（必需）。
    • 正值：阴影向下偏移。
    • 负值：阴影向上偏移。
  3. blur-radius：模糊半径（可选）。
    • 值越大，阴影越模糊，越柔和。
    • 值为 0 时，阴影边缘非常锐利。
  4. spread-radius：扩展半径（可选）。
    • 正值：阴影扩大，范围增大。
    • 负值：阴影收缩，范围缩小。
  5. color：阴影的颜色（可选）。默认值是 rgba(0, 0, 0, 0.5)。
    • 可以使用颜色名称、RGB、RGBA、HSL 等格式指定颜色。
  6. inset：设置为 inset 时，阴影会应用到元素的内部，而不是外部（可选）。
    • 默认情况下，阴影是外部阴影，添加 inset 后，阴影变为内阴影。

示例 1: 基本的 box-shadow

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
  • 10px：水平偏移 10 像素，阴影向右。
  • 10px：垂直偏移 10 像素，阴影向下。
  • 15px：模糊半径 15 像素，阴影较为柔和。
  • rgba(0, 0, 0, 0.3)：阴影颜色为半透明的黑色。

示例 2: 带扩展半径的阴影

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.5);
}
  • 5px：水平偏移 5 像素。
  • 5px：垂直偏移 5 像素。
  • 15px：模糊半径 15 像素。
  • 5px：扩展半径 5 像素，阴影范围会扩大。
  • rgba(0, 0, 0, 0.5)：阴影颜色为半透明黑色。

示例 3: 内阴影 inset

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.3);
}
  • inset：表示这是一个内阴影，阴影将显示在元素的内部，而不是外部。
  • 10px：水平偏移 10 像素。
  • 10px：垂直偏移 10 像素。
  • 20px：模糊半径 20 像素，阴影较为柔和。
  • rgba(0, 0, 0, 0.3)：阴影颜色为半透明黑色。

示例 4: 多重阴影

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(255, 0, 0, 0.5);
}
  • 这里有两个阴影：
    • 第一个阴影 5px 5px 10px rgba(0, 0, 0, 0.3) 是普通的黑色阴影。
    • 第二个阴影 -5px -5px 10px rgba(255, 0, 0, 0.5) 是一个红色的阴影，并且它向左和向上偏移。

示例 5: 实现立体效果

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3), 0px 5px 15px rgba(0, 0, 0, 0.2);
}
  • 通过添加多个阴影，可以使元素看起来更立体。
  • box-shadow 支持多个阴影，每个阴影之间用逗号分隔。

6. 阴影的常见用法

  • 按钮阴影效果：常用于按钮的点击效果、悬停效果等。 .button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .button:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); }
  • 卡片式设计：常用于卡片布局，给元素添加阴影，增加层次感。 .card { width: 300px; padding: 20px; background-color: white; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
  • 悬浮效果：使元素在页面中悬浮，创造阴影深度效果。 .floating { width: 150px; height: 150px; background-color: #3498db; border-radius: 10px; box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.1); }

7. 浏览器兼容性

box-shadow 是一个广泛支持的 CSS 属性，几乎所有现代浏览器都支持该属性。对于旧版浏览器（如 Internet Explorer 8 及以下），它可能不被支持，或者表现不稳定。

8. 性能注意事项

box-shadow 在视觉上看起来非常酷，但它可能会影响性能，尤其是在移动设备上使用多个阴影时。因此，在应用多个阴影效果时，应注意阴影数量和复杂度，以保持良好的页面性能。

总结

  • box-shadow 是一种非常有用的 CSS 特性，用于给元素添加阴影效果。
  • 通过调整水平偏移、垂直偏移、模糊半径、扩展半径、颜色以及内外阴影的组合，可以实现各种不同的视觉效果。
  • 使用时可以结合多个阴影、颜色以及动画效果来提高网页的用户体验。

如果你有任何关于 box-shadow 的其他问题，或者需要更具体的使用案例，随时告诉我！