CSS文本投影通过text-shadow属性实现，可设置水平垂直偏移、模糊半径和颜色，支持多阴影叠加以增强立体感或发光效果；结合filter的drop-shadow()、动画及transform可创建动态或复杂视觉效果，适用于提升可读性、按钮反馈和风格塑造；现代浏览器兼容性良好，但应减少阴影数量、控制模糊半径、避免动画以优化性能。
CSS字体文本投影，简单来说，就是给文字加一层阴影，让它看起来更有立体感，或者更醒目。实现这个效果，主要用到
text-shadow属性。
text-shadow属性详解与应用
text-shadow 属性允许你为文本添加一个或多个阴影。它接受一个以逗号分隔的阴影列表，每个阴影由 2-4 个长度值和一个可选的颜色值组成。
text-shadow: h-shadow v-shadow blur-radius color;
- h-shadow: 必需。阴影的水平偏移量。正值表示阴影位于文本右侧，负值表示位于左侧。
- v-shadow: 必需。阴影的垂直偏移量。正值表示阴影位于文本下方，负值表示位于上方。
- blur-radius: 可选。阴影的模糊半径。值越大，阴影越模糊。如果值为 0，则阴影是清晰的。
- color: 可选。阴影的颜色。如果没有指定颜色，则使用文本颜色。
简单示例：
立即学习“前端免费学习笔记（深入）”；
h1 {
text-shadow: 2px 2px 4px #000000; /* 黑色阴影 */
}
p {
text-shadow: -1px -1px 2px red; /* 红色阴影，向左上方偏移 */
}多个阴影：
你可以叠加多个阴影，创造更复杂的效果。
h2 {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
}这个例子中，
h2元素有三个阴影：一个黑色阴影，一个蓝色模糊阴影，和一个更小的蓝色模糊阴影。 叠加阴影可以实现发光效果。
CSS文本投影有哪些实际应用场景？
文本投影并非只是为了美观，它在很多场景下都能提升用户体验。比如，在背景颜色比较浅或者复杂的图片上，添加文本投影可以提高文字的可读性。再比如，在按钮上使用轻微的投影，可以模拟按钮的按下效果，增加交互的反馈感。在一些设计风格中，文本投影也常常被用来营造复古或者未来感。
具体应用场景：
- 提升可读性: 在浅色或复杂背景上增加阴影。
- 增加立体感: 轻微的阴影可以使文字看起来更突出。
- 创建特殊效果: 叠加阴影可以创建发光、浮雕等效果。
- 按钮交互反馈: 模拟按钮按下效果。
- 品牌风格塑造: 打造复古、未来等风格。
如何用CSS实现更高级的文本投影效果？
除了基本的
text-shadow属性，还可以结合其他CSS属性，创造更高级的文本投影效果。例如，可以使用
filter属性的
drop-shadow()函数，它允许你创建更复杂的阴影，包括透明度支持和更灵活的偏移控制。此外，结合CSS动画，可以让文本投影动起来，增加视觉吸引力。
高级技巧：
-
drop-shadow()
滤镜:.text-with-drop-shadow { filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); }drop-shadow()
允许你控制阴影的透明度，并且可以应用于任何元素，不仅仅是文本。 -
CSS动画:
.glowing-text { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff; animation: glow 2s infinite; } @keyframes glow { from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff; } to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 25px #fff; } }通过改变
text-shadow
的值，可以创建动态的发光效果。 -
结合
transform
属性:可以结合
transform
属性，例如rotate
和skew
，让阴影也跟着旋转或倾斜，创造更有趣的视觉效果。
text-shadow在不同浏览器上的兼容性如何？
text-shadow属性的兼容性非常好，几乎所有现代浏览器都支持。包括Chrome, Firefox, Safari, Edge, 以及较新版本的IE。 然而，为了确保最佳的兼容性，最好还是进行一些测试，特别是在针对老旧浏览器时。 可以使用Can I use网站来查询具体浏览器的支持情况。
使用text-shadow时，有哪些性能优化建议？
虽然
text-shadow很实用，但过度使用也会影响性能，特别是在移动设备上。 建议尽量减少阴影的数量，避免使用过大的模糊半径，并尽量避免在动画中使用
text-shadow，除非确实需要。 可以考虑使用其他方式来实现类似的效果，比如使用图片或者SVG。
优化建议：
- 减少阴影数量: 尽量使用单个阴影，避免叠加过多阴影。
- 限制模糊半径: 较大的模糊半径会增加渲染成本。
-
避免动画: 在动画中使用
text-shadow
可能会导致性能问题。 - 使用替代方案: 考虑使用图片或 SVG 来实现类似效果。
-
开启硬件加速: 某些情况下，开启硬件加速可以提高渲染性能，但需要谨慎使用，避免引起其他问题。 通常可以通过CSS的
transform: translateZ(0);
或backface-visibility: hidden;
来触发硬件加速。
