css变量可替代text-shadow固定值，但需拆分为--ts-x、--ts-y等独立变量组合使用；散射效果需多层text-shadow叠加实现，单层大blur-radius会导致模糊失真；动态变化靠:hover或js更新变量，须配transition且注意兼容性与性能。
text-shadow 里怎么用 CSS 变量替代固定数值
直接在 text-shadow 值中引用 var(--x) 是可行的，但必须确保每个参数都单独定义、独立引用。浏览器不支持把整个阴影值（如 "2px 2px 4px #000"）存成一个变量再展开——那会解析失败。
常见错误是写成这样：text-shadow: var(--full-shadow);，结果阴影完全不显示。因为 var() 返回的是字符串字面量，而 text-shadow 需要的是分离的数值+单位+颜色 token。
- 正确做法：把每个参数拆成独立变量，例如
--ts-x、--ts-y、--ts-blur、--ts-color - 然后组合：
text-shadow: var(--ts-x) var(--ts-y) var(--ts-blur) var(--ts-color); - 所有变量需在作用域内提前声明（通常放在
:root或组件级选择器下）
为什么散射效果要用多个 text-shadow 而不是单个大 blur-radius
所谓“散射”，本质是让阴影在空间上铺开、分层、产生深度感，而不是单纯模糊边缘。单靠增大 blur-radius（比如设成 30px）只会让阴影变软、变淡，丢失方向性和结构感，且在高 DPR 屏幕下易发虚、性能下降明显。
真正可控的散射，是用逗号分隔的多层 text-shadow，每层控制不同偏移和模糊，形成叠加错位效果。
- 例如模拟毛玻璃散射：
text-shadow: -1px -1px 2px rgba(0,0,0,0.1), 1px 1px 2px rgba(255,255,255,0.2); - 若用变量实现动态散射，就为每层定义一套变量组：
--ts-1-x/--ts-1-y/--ts-1-blur/--ts-1-color，依此类推 - 注意：Chrome/Firefox 对超过 8 层
text-shadow的渲染有轻微延迟，Safari 在 iOS 17+ 才稳定支持 6 层以上
如何用 :hover 或 JavaScript 触发散射强度变化
变量本身是静态的，要“动”起来，得靠状态切换或脚本驱动。伪类最轻量，适合简单交互；JavaScript 更灵活，适合根据数据或滚动位置响应。
- 悬停增强散射：
.scatter-text { --ts-1-x: 0; --ts-1-y: 0; --ts-1-blur: 2px; --ts-1-color: rgba(0,0,0,0.1); } .scatter-text:hover { --ts-1-x: 2px; --ts-1-y: 2px; --ts-1-blur: 6px; } - JS 动态更新（注意单位必须带）：
el.style.setProperty('--ts-2-blur', `${value}px`); - 务必加
transition: text-shadow 0.25s ease;，否则变量变了，视觉跳变
容易被忽略的兼容性与性能坑
文字阴影的变量化看似简单，但两个细节常导致线上失效：
-
text-shadow不支持inset关键字（那是box-shadow的），变量里别塞这个 - IE 完全不支持 CSS 变量，哪怕加了 fallback，
text-shadow: var(--x) ...整行也会被忽略——得用@supports (text-shadow: 0 0 0 #000)包一层 - 过度使用多层阴影 + 大模糊值（>15px）在低端 Android 设备上可能触发重绘卡顿，建议用
will-change: text-shadow谨慎开启合成层
真正难的不是写出来，而是让散射既随状态变化、又不糊、还不掉帧——变量只是开关，每一层偏移和模糊的配比，得靠眼睛调，不是靠公式算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
