CSS3 阴影

CSS 阴影效果

使用阴影增加深度

CSS 允许你为文本和元素框添加阴影效果，从而营造深度感、突出重点或实现视觉风格。

主要的属性是：

• text-shadow：直接为文本字符应用阴影效果。
• box-shadow：为 HTML 元素的框应用阴影效果。

浏览器支持

text-shadow 和 box-shadow 属性已广泛支持所有现代 Web 浏览器。不需要供应商前缀。

text-shadow (文本阴影)

text-shadow 属性为文本添加一个或多个阴影。每个阴影由偏移量、可选的模糊半径和可选的颜色定义。

语法：text-shadow: h-offset v-offset [blur-radius] [color];

• h-offset：水平偏移量（正值向右移动，负值向左移动）。必需。
• v-offset：垂直偏移量（正值向下移动，负值向上移动）。必需。
• blur-radius：可选。值越大，模糊效果越强。默认为 0（清晰阴影）。
• color：可选。指定阴影颜色。如果省略，则默认为元素的 color 属性值。

示例：简单的偏移阴影：

.simple-text-shadow {
  /* 向右偏移 2px，向下偏移 2px，黑色阴影 */
  text-shadow: 2px 2px black;
}

示例：带模糊和颜色的偏移阴影：

.blurred-text-shadow {
  /* 向右偏移 2px，向下偏移 2px，5px 模糊，灰色阴影 */
  text-shadow: 2px 2px 5px grey;
}

示例：柔和的“发光”效果（无偏移，只有模糊）：

.glow-text {
  color: white;
  background-color: black; /* 为了对比度 */
  /* 白色发光，8px 模糊 */
  text-shadow: 0 0 8px white;
}

多个文本阴影

你可以通过提供逗号分隔的阴影定义列表，为文本应用多个阴影。

示例：多个彩色发光效果：

.multi-glow-text {
  color: white;
  background-color: #222;
  /* 红色发光 + 蓝色发光 */
  text-shadow: 0 0 5px #FF0000, 0 0 10px #0000FF;
}

示例：创建轮廓效果：

.outline-text {
  color: yellow;
  /* 使用多个清晰阴影创建轮廓 */
  text-shadow: -1px -1px 0 #000,
                1px -1px 0 #000,
               -1px  1px 0 #000,
                1px  1px 0 #000;
}

box-shadow (盒子阴影)

box-shadow 属性为元素的框（其 box）添加一个或多个阴影。它会跟随元素的形状，包括边框圆角（border-radius）。

语法：box-shadow: [inset] h-offset v-offset [blur-radius] [spread-radius] [color];

• inset：可选关键字。如果存在，将阴影从外阴影（默认）更改为内阴影。
• h-offset：水平偏移量。必需。
• v-offset：垂直偏移量。必需。
• blur-radius：可选。值越大，模糊效果越强。
• spread-radius：可选。正值扩大阴影尺寸，负值缩小。默认为 0。
• color：可选。指定阴影颜色。

示例：简单的外阴影：

.simple-box-shadow {
  /* 向右偏移 5px，向下偏移 10px，深灰色阴影 */
  box-shadow: 5px 10px #555;
}

示例：带模糊和扩展半径的外阴影：

.blurred-spread-shadow {
  /* 向右偏移 2px，向下偏移 2px，15px 模糊，5px 扩展，浅灰色 */
  box-shadow: 2px 2px 15px 5px lightgrey;
}

示例：内阴影（营造凹陷效果）：

.inner-shadow-box {
  background-color: #eee;
  /* 内阴影: 向右偏移 1px，向下偏移 1px，3px 模糊，灰色 */
  box-shadow: inset 1px 1px 3px grey;
}

多个盒子阴影

类似于 text-shadow，你可以通过提供逗号分隔的列表来应用多个盒子阴影。这通常用于创建更复杂的深度效果。

示例：精妙的分层阴影效果：

.layered-shadow {
  background-color: white;
  border-radius: 8px;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.1),
    0 2px 2px rgba(0,0,0,0.1),
    0 4px 4px rgba(0,0,0,0.1),
    0 8px 8px rgba(0,0,0,0.1);
}

性能注意事项

尽管功能强大，但复杂或数量众多的 box-shadow 效果，尤其是在大型或频繁变化的元素上，有时会影响渲染性能。请谨慎使用它们，特别是如果计划涉及阴影的动画或过渡。

CSS 阴影属性总结

属性	描述
text-shadow	为文本内容添加一个或多个阴影。
box-shadow	为元素的框框架添加一个或多个阴影。