CSS3中阴影的表示方法有哪些

在现代网页设计中，阴影效果是提升页面视觉层次感的重要手段之一。CSS3 提供了多种阴影效果的实现方式，包括文本阴影、盒子阴影以及滤镜阴影等。本文将详细介绍 CSS3 中阴影的表示方法，并通过示例代码帮助读者更好地理解和应用这些技术。

1. 文本阴影 (text-shadow)

text-shadow 是 CSS3 中用于为文本添加阴影效果的属性。通过 text-shadow，可以为文本添加一个或多个阴影，从而增强文本的可读性和视觉效果。

1.1 基本语法

text-shadow: h-shadow v-shadow blur-radius color;

• h-shadow：水平阴影的位置，正值表示阴影在文本右侧，负值表示阴影在文本左侧。
• v-shadow：垂直阴影的位置，正值表示阴影在文本下方，负值表示阴影在文本上方。
• blur-radius：阴影的模糊半径，值越大，阴影越模糊。可选参数，默认值为 0。
• color：阴影的颜色。可选参数，默认值为当前文本颜色。

1.2 示例

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

上述代码为 <h1> 元素添加了一个向右下方偏移 2px、模糊半径为 4px、颜色为半透明黑色的阴影。

1.3 多重阴影

text-shadow 支持为文本添加多个阴影，多个阴影之间用逗号分隔。

h1 {
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.5),
    -2px -2px 4px rgba(255, 255, 255, 0.5);
}

上述代码为 <h1> 元素添加了两个阴影，一个向右下方偏移，另一个向左上方偏移，形成了立体效果。

2. 盒子阴影 (box-shadow)

box-shadow 是 CSS3 中用于为元素盒子添加阴影效果的属性。与 text-shadow 类似，box-shadow 也可以为元素添加一个或多个阴影，从而增强元素的立体感和层次感。

2.1 基本语法

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

• h-shadow：水平阴影的位置，正值表示阴影在元素右侧，负值表示阴影在元素左侧。
• v-shadow：垂直阴影的位置，正值表示阴影在元素下方，负值表示阴影在元素上方。
• blur-radius：阴影的模糊半径，值越大，阴影越模糊。可选参数，默认值为 0。
• spread-radius：阴影的扩展半径，正值表示阴影扩大，负值表示阴影缩小。可选参数，默认值为 0。
• color：阴影的颜色。可选参数，默认值为当前文本颜色。
• inset：可选参数，表示阴影为内阴影。默认情况下，阴影为外阴影。

2.2 示例

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

上述代码为 <div> 元素添加了一个向右下方偏移 4px、模糊半径为 8px、颜色为半透明黑色的阴影。

2.3 多重阴影

box-shadow 同样支持为元素添加多个阴影，多个阴影之间用逗号分隔。

div {
  box-shadow: 
    4px 4px 8px rgba(0, 0, 0, 0.3),
    -4px -4px 8px rgba(255, 255, 255, 0.3);
}

上述代码为 <div> 元素添加了两个阴影，一个向右下方偏移，另一个向左上方偏移，形成了立体效果。

2.4 内阴影

通过 inset 关键字，可以为元素添加内阴影效果。

div {
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3);
}

上述代码为 <div> 元素添加了一个内阴影，阴影向右下方偏移 4px、模糊半径为 8px、颜色为半透明黑色。

3. 滤镜阴影 (filter: drop-shadow)

CSS3 中的 filter 属性提供了多种图像处理效果，其中 drop-shadow 滤镜可以为元素添加阴影效果。与 box-shadow 不同，drop-shadow 滤镜可以应用于非矩形元素（如 SVG 图形），并且阴影的形状会跟随元素的轮廓。

3.1 基本语法

filter: drop-shadow(h-shadow v-shadow blur-radius color);

• h-shadow：水平阴影的位置，正值表示阴影在元素右侧，负值表示阴影在元素左侧。
• v-shadow：垂直阴影的位置，正值表示阴影在元素下方，负值表示阴影在元素上方。
• blur-radius：阴影的模糊半径，值越大，阴影越模糊。可选参数，默认值为 0。
• color：阴影的颜色。可选参数，默认值为当前文本颜色。

3.2 示例

img {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}

上述代码为 <img> 元素添加了一个向右下方偏移 4px、模糊半径为 8px、颜色为半透明黑色的阴影。

3.3 多重阴影

filter 属性不支持直接添加多个阴影，但可以通过嵌套元素或使用伪元素来实现多重阴影效果。

div {
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}

div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(-4px -4px 8px rgba(255, 255, 255, 0.3));
}

上述代码通过伪元素为 <div> 元素添加了两个阴影，一个向右下方偏移，另一个向左上方偏移，形成了立体效果。

4. 阴影的应用场景

4.1 提升文本可读性

在浅色背景上使用深色文本阴影，或在深色背景上使用浅色文本阴影，可以有效提升文本的可读性。

h1 {
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

4.2 增强按钮的立体感

通过为按钮添加外阴影和内阴影，可以增强按钮的立体感和点击感。

button {
  box-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.3),
    inset 2px 2px 4px rgba(255, 255, 255, 0.3);
}

4.3 创建卡片效果

通过为卡片元素添加阴影，可以创建出悬浮在页面上的卡片效果。

.card {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

4.4 为不规则元素添加阴影

对于不规则元素（如 SVG 图形），可以使用 filter: drop-shadow 来添加阴影效果。

svg {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}

5. 总结

CSS3 提供了多种阴影效果的实现方式，包括 text-shadow、box-shadow 和 filter: drop-shadow。每种方式都有其独特的应用场景和优势。通过合理使用这些阴影效果，可以显著提升网页的视觉层次感和用户体验。希望本文的介绍和示例能够帮助读者更好地理解和应用 CSS3 中的阴影技术。