CSS文本阴影 text-shadow 悬停效果详解

文本阴影是在字体背后添加投影效果，让字体看起来有立体和浮动的效果。 text-shadow 属性可以添加阴影效果，以逐步增加各种文字的 3D 效果，文本阴影可以用于各种文本或标题。

语法

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

参数

• h-shadow：必选。阴影的水平位置。允许负值，表示阴影位于文本左侧。
• v-shadow：必选。阴影的垂直位置。允许负值，表示阴影位于文本上方。
• blur-radius：可选。模糊距离。
• color：可选。阴影的颜色。如果未设置，默认是文本颜色的颜色混合值（即 RGB（0,0,0）+文本颜色）。

示例

实例1

h1 {
  text-shadow: 2px 2px 4px #000000;
}

该示例会在标题上添加一根 2px * 2px 的阴影，颜色为 #000000，模糊半径为 4px。

实例2

h2:hover {
  text-shadow: 2px 2px 4px #FF0000;
}

该示例会在鼠标悬停在标题上时添加一根 2px * 2px 的阴影，颜色为 #FF0000，模糊半径为 4px。

总结

text-shadow 属性可以让文本和标题看起来更加生动和立体，该属性是定义文本阴影的标准方法。可以通过调整投影的角度、透明度和软件度来改变文本的视觉效果。此外，可以将其与其他 CSS 属性（如 hover 和 transition）一起使用，以使文本有更好的视觉效果。