text-shadow的color参数必须显式写出，否则回退为文字颜色；它固定为第四位，顺序不可变，省略则无彩色投影；推荐用rgba()控制透明度，多层时按从左到右顺序叠加。
text-shadow 的 color 参数必须显式写出，否则浏览器会回退到文字本身颜色，根本不是你想要的“彩色投影”。
text-shadow 颜色写在哪、怎么写才生效
color 是 text-shadow 的第四个参数，顺序不可交换：前两个是偏移（h-offset 和 v-offset），第三个是模糊半径（blur-radius），第四个才是颜色。省略 color 时，浏览器直接用当前 color 值——哪怕你本意是投红影，文字却是黑的，那影也是黑的。
-
text-shadow: 2px 2px 4px #f00→ 红色投影（✅） -
text-shadow: 2px 2px 4px→ 投影颜色 = 文字颜色（❌ 不是你想要的“彩色”） -
text-shadow: 2px 2px #f00→ 无效声明（浏览器忽略整条规则）
RGBA 透明色比纯色更自然
用 rgba() 控制投影透明度，能避免生硬边缘，尤其在浅色背景上效果更柔和。比如深色文字配浅背景时，rgba(0, 0, 0, 0.2) 比 #000 更易读、更不抢眼。
- 推荐写法：
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25) - 慎用全透明：
rgba(0, 0, 0, 0)→ 影子消失，等于没写 - 不要用
hsla()或命名色（如red）替代rgba()—— 可控性差，调试困难
多层投影时颜色叠加有顺序依赖
逗号分隔的多层 text-shadow 从左到右绘制，后写的层盖在先写的层上面。这意味着：如果你先写蓝影再写红影，红影会部分遮挡蓝影；反过来则蓝影更明显。
立即学习“前端免费学习笔记（深入）”；
- 发光效果常用：
text-shadow: 0 0 4px rgba(255, 215, 0, 0.8), 0 0 8px rgba(255, 215, 0, 0.4) - 描边效果要四方向同色：
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff - 别混用高饱和+高透明色——容易视觉打架，比如
rgba(255, 0, 0, 0.9)和rgba(0, 0, 255, 0.9)同时存在时边缘发紫
投影颜色受字体粗细和字号影响很大
小字号（≤14px）下，高饱和或强对比色投影反而降低可读性；加粗字体（font-weight: bold）能更好承载多层或较宽模糊的投影，但同时也更容易让颜色“糊成一团”。
- 12px 文字慎用
blur-radius > 2px，即使颜色再准也看不清字形 - 深色背景 + 浅色文字时，投影颜色建议比文字色更深一级（如白字配
rgba(0, 0, 0, 0.4)），而非直接套用黑色 - 系统字体（如 San Francisco、Segoe UI）对投影渲染更稳定；自定义字体若 hinting 差，
text-shadow可能出现断点或色边
真正难的不是写对语法，而是让颜色在不同背景、不同设备像素比、不同字体渲染引擎下都保持一致——这需要实测，而不是靠理论值凑数。
