---

CSS3 text-shadow 属性

什么是CSS3 text-shadow？

CSS3 text-shadow 属性定义了文字的阴影效果。该属性可以接受多个参数，包括 X 偏移量、Y 偏移量、模糊半径和阴影颜色等，用于调整文字阴影的大小、位置和颜色。

如何使用CSS3 text-shadow？

使用CSS3 text-shadow 属性非常简单，只需在样式中指定属性及其值即可。以下是一个使用 text-shadow 的例子：

h1 {
    text-shadow: 2px 2px 5px #999;
}

该示例会给所有 <h1> 标签应用一个阴影效果，阴影的 X 和 Y 偏移量均为 2px，模糊半径为 5px，阴影颜色为 #999。

text-shadow的常用参数

1. X 和 Y 偏移量：这两个参数用于控制阴影的位置，X 偏移量定义阴影相对于原始文字的水平位移量（正数向右，负数向左），Y 偏移量则定义阴影相对于原始文字的垂直位移量（正数向下，负数向上）。

2. 模糊半径：该参数用于控制阴影的模糊程度，数字越大表示越模糊，0 表示不模糊。

3. 阴影颜色：用于设定阴影的颜色值，可以是常见的颜色名称、16进制RGB值或RGB颜色值。

text-shadow的实际应用

1. 制作卡片式文字：

.card {
    text-shadow: 2px 2px #aaa;
}

2. 制作浮雕式文字：

.emboss {
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;
}

3. 制作文字渐变效果：

.gradient {
    text-shadow: 1px 1px #fff, -1px -1px #333, 2px 2px #666;
    background-color: #222;
    color: transparent;
    -webkit-background-clip: text;
}

text-shadow注意事项

1. 使用 text-shadow 时要注意阴影的数量和颜色，过多或颜色过深的阴影会影响文字的可读性。

2. 要尽量避免使用太大的模糊半径，否则文字阴影效果会过于模糊，影响可读性。

3. text-shadow 属性可能无法在某些旧浏览器和设备上正常显示，需要做好兼容性处理。

总结

CSS3 text-shadow 属性是一种简单而实用的制作文字阴影效果的方法，可以通过调整不同的参数来实现不同的阴影效果。在实际应用中，需要注意阴影的数量和颜色，以及模糊半径的设置。