必须用rgba()控制text-shadow透明度，因hex无alpha通道且#rrggbbaa兼容性差；rgba()支持ie9+、多层叠加、js动态计算及css变量，兼顾精确性与可控性。
text-shadow里用rgba()才能精确控制阴影透明度
HEX颜色本身不带alpha通道，#FF573380这种写法在text-shadow中不可靠——旧版Android WebView、IE或某些CSS压缩工具会直接忽略后两位，导致阴影变成不透明的纯色，甚至回退为黑色。真正稳定的方案只有rgba(255, 87, 51, 0.6)（IE9+支持）或现代#RRGGBBAA（Chrome 93+/Firefox 93+/iOS Safari 15.4+），但后者在VS Code里常被语法插件标红，构建时也可能被误删。
常见错误现象：text-shadow: 2px 2px 4px #FF573380;在部分环境渲染成实心深红阴影，而不是预期的半透效果。
-
rgba()第四个参数必须是0–1的小数，rgb(255, 87, 51, 0.6)是无效语法，整条声明会被浏览器丢弃 - 若需兼容IE8及更老环境，只能放弃阴影透明度，改用
opacity控制整个文字元素——但这会让文字本身也变透明，不是只影响阴影 -
text-shadow支持多层叠加，用rgba()可逐层调整每层的透明度，比如text-shadow: 1px 1px 2px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.1);
text-shadow中RGB数值比HEX更易做动态微调
JavaScript读取计算后的text-shadow值时，getComputedStyle(el).textShadow返回的是rgba()或rgb()格式，不是HEX。想在运行时按主题切换阴影深浅、适配深色模式、或根据背景自动反色，直接操作RGB数组最自然。
例如：把阴影从rgba(0,0,0,0.5)临时提亮到rgba(30,30,30,0.4)，只需改三个数字；而用HEX就得先解析#000000→转十进制→计算→再转回十六进制，中间一步溢出或大小写没处理好（如#ff6b35里b不是B），结果就偏色。
- HEX简写如
#000会自动双写为#000000，但设计稿给的#1a1a1a和#000在阴影中视觉差异明显，关键UI别偷懒 - 用CSS变量拆解更稳妥：
--shadow-r: 0; --shadow-g: 0; --shadow-b: 0;，后续写text-shadow: 2px 2px 4px rgba(var(--shadow-r), var(--shadow-g), var(--shadow-b), 0.5);
HEX在text-shadow里体积小但无实际优势
静态场景下#000确实比rgba(0,0,0,1)少7个字符，V8对#RRGGBB有专用解析路径，Chromium 128实测快约15%。但text-shadow通常需要透明度，一旦加rgba()，HEX的体积优势就没了；而纯不透明阴影（如text-shadow: 1px 1px 0 #000;）实际使用极少——没有模糊半径的硬边阴影在现代UI中基本等于bug。
性能影响几乎可忽略：浏览器对text-shadow的渲染开销主要来自高斯模糊计算，不是颜色解析。选rgba()不是为了快，而是为了可控。
- 混用百分比和整数会失效，
text-shadow: 2px 2px 4px rgb(0%, 0, 0);整条声明被丢弃 -
text-shadow不支持HSL/HWB/LAB等现代颜色空间，目前仍以RGB系为事实标准
容易被忽略的细节：text-shadow的blur-radius和透明度协同关系
很多人只调alpha值，却忽略blur-radius越大，阴影越“发散”，同等alpha下视觉透明感越强。比如text-shadow: 0 0 10px rgba(0,0,0,0.3)看起来比0 0 2px rgba(0,0,0,0.6)更轻盈——这不是错觉，是高斯模糊导致像素采样稀疏化的真实效果。
所以不要孤立调透明度；在暗色背景上，适当增大blur-radius并降低alpha，比死守某个固定值更有效。
- 移动端Webview对大
blur-radius渲染性能敏感，超过20px可能掉帧 -
text-shadow不继承父元素opacity，但会受filter: opacity()影响，且后者会触发重绘，慎用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
