【css text-shadow 属性的使用】`text-shadow` 是 CSS 中用于为文本添加阴影效果的属性，能够增强文字的视觉表现力。通过设置不同的参数，可以实现多种风格的阴影效果，适用于标题、按钮、图标等场景。
一、总结
`text-shadow` 属性允许开发者为网页中的文本添加一个或多个阴影效果。它支持四个基本参数：水平偏移量、垂直偏移量、模糊半径和颜色。此外，还可以通过逗号分隔多个阴影值，实现叠加效果。合理使用 `text-shadow` 可以提升页面的层次感与美观度。
二、text-shadow 属性详解
| 参数 | 说明 | 示例 |
| horizontal-offset | 水平方向的偏移量，正数向右，负数向左 | `2px` |
| vertical-offset | 垂直方向的偏移量，正数向下，负数向上 | `4px` |
| blur-radius | 阴影的模糊程度，数值越大越模糊 | `6px` |
| color | 阴影的颜色，可使用颜色名称、十六进制、RGB 等格式 | `000` 或 `rgba(0,0,0,0.5)` |
三、语法结构
```css
text-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [color];
```
若不指定某些参数，浏览器会根据默认值进行处理。例如：
- 若省略 `blur-radius`，则默认为 `0`。
- 若省略 `color`，则使用文本颜色。
四、多阴影效果
可以通过逗号分隔多个阴影值，实现多重阴影效果：
```css
text-shadow: 1px 1px 2px 000, -1px -1px 2px fff;
```
此例中，文本将同时拥有黑色和白色的阴影，形成立体感。
五、兼容性与注意事项
- `text-shadow` 在现代浏览器中广泛支持，包括 Chrome、Firefox、Safari 和 Edge。
- 不建议在移动端过度使用，以免影响性能。
- 阴影颜色应与背景色搭配，避免影响可读性。
六、示例代码
```css
/ 单个阴影 /
h1 {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
/ 多个阴影 /
p {
text-shadow: 1px 1px 2px 000, -1px -1px 2px fff;
}
```
七、总结
`text-shadow` 是一个简单但强大的 CSS 属性，能够为网页文字带来丰富的视觉效果。掌握其基本用法和高级技巧，有助于提升网页设计的专业性和美观度。合理使用阴影，可以让文字更具层次感和吸引力。
