上一篇
html字体加投影
HTML字体加投影需CSS实现，如
text-shadow:2px 2px 5px #000;设置阴影偏移与
基础用法
在HTML中,字体加投影（阴影）主要通过CSS的text-shadow属性实现，该属性可为文本添加一层或多层阴影，增强立体感或视觉效果。
语法示例：
<span style="color: #fff; text-shadow: 2px 2px 5px rgba(0,0,0,0.5);">投影文字</span>
参数详解
text-shadow属性的语法为：text-shadow: [水平偏移] [垂直偏移] [模糊半径] [阴影颜色]
| 参数 | 说明 | 示例值 |
|---|---|---|
| 水平偏移 | 阴影相对于文字的水平距离 | 2px（右移2像素） |
| 垂直偏移 | 阴影相对于文字的垂直距离 | 3px（下移3像素） |
| 模糊半径 | 阴影的模糊程度（可选） | 5px（模糊5像素） |
| 阴影颜色 | 阴影颜色（可选，默认为黑色） | rgba(0,0,0,0.5) |
多层阴影与效果
text-shadow支持多个阴影叠加，用逗号分隔。
text-shadow: 1px 1px 2px #000, / 第一层阴影 / 3px 3px 5px #f00; / 第二层阴影 /
| 效果类型 | 代码示例 | 说明 |
|---|---|---|
| 单层阴影 | text-shadow: 2px 2px 3px #aaa; | 简单灰色阴影 |
| 多层阴影 | text-shadow: 1px 1px 2px #000, -1px -1px 2px #fff; | 黑白双重阴影（浮雕感） |
| 透明阴影 | text-shadow: 2px 2px 5px rgba(0,0,0,0.3); | 半透明黑色阴影 |
兼容性与注意事项
- 浏览器支持：现代浏览器（如Chrome、Firefox、Edge）均支持
text-shadow，但IE9以下版本不兼容。 - 性能影响：过多阴影或高模糊值可能影响渲染性能，建议适度使用。
- 与字体搭配：粗体或大号字体更适合添加阴影，细体文字可能因阴影过强导致模糊。
常见问题与解答
问题1：如何让阴影颜色随背景自动变化？
解答：使用rgba或hsla设置透明度，并搭配背景色。
background-color: #ffeb3b; text-shadow: 2px 2px 3px rgba(0,0,0,0.2); / 黄色背景搭配黑色半透明阴影 /
问题2：为什么多层阴影会出现覆盖问题？
解答：阴影顺序由代码中逗号分隔的顺序决定，后写的阴影会覆盖先写的，若需调整层级，可修改顺序或增加z-index（需
