text-shadow是css属性，用于给文字添加阴影效果。基本语法为text-shadow: 水平偏移量 垂直偏移量 模糊半径 阴影颜色;，例如2px 2px 4px rgba(0,0,0,0.5)；常见应用场景包括增强对比度、复古/立体风格和多个阴影叠加模拟霓虹灯效果；注意事项有避免过度模糊、合理设置多层阴影顺序、使用rgba颜色提升柔和度，并需测试移动端显示效果及排查选择器错误、颜色相近或浏览器兼容性问题。合理使用text-shadow能提升页面质感，但应避免滥用导致杂乱。
在网页设计中，文字阴影（text-shadow）是一个很实用的效果，能让文字更有层次感或者提升可读性。html本身不支持直接设置文字阴影，但通过css的text-shadow属性，可以轻松实现这一效果。
基本语法与使用方式
text-shadow是CSS中的一个属性，用于给文字添加阴影效果。它的基本格式如下：
text-shadow: 水平偏移量 垂直偏移量 模糊半径 阴影颜色;
- 水平偏移量：阴影向右或左移动的距离（正为右，负为左）
- 垂直偏移量：阴影向下或上移动的距离（正为下，负为上）
- 模糊半径（可选）：值越大，边缘越模糊，默认为0时没有模糊
- 阴影颜色（可选）：默认为当前文字颜色
例如：
立即学习“前端免费学习笔记（深入）”；
h1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
这个例子会让标题文字有一个向右下方偏移、略带模糊的黑色阴影。
常见应用场景与建议
文字阴影并不是随便加一个就能好看，得根据整体风格来调整。以下是几个常见场景和使用建议：
- 增强对比度：背景复杂或图片上显示文字时，加个浅色或深色的阴影能提高可读性。
- 复古/立体风格：适当使用大偏移+低透明度的阴影，可以营造出老式海报或浮雕效果。
- 多个阴影叠加：用逗号分隔可以添加多个阴影，比如模拟霓虹灯字效。
举个例子：
.title { text-shadow: 1px 1px 2px #000, -1px -1px 2px #fff; }
这样会同时出现两个方向的阴影，形成一种立体边框的感觉。
注意事项与常见问题
虽然text-shadow使用简单，但还是有几个细节需要注意：
- 不要过度使用模糊半径，否则会影响阅读体验
- 多层阴影叠加时注意顺序，前面的阴影会被后面的覆盖
- 使用rgba()颜色可以让阴影更柔和自然，而不是生硬的黑白色
- 移动端显示效果可能略有不同，最好做适配测试
如果你发现阴影没生效，检查一下是不是以下原因：
基本上就这些。合理使用text-shadow可以让页面看起来更有质感，但别滥用，不然反而显得杂乱。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
