text-shadow 不支持 CSS 过渡，须用 opacity 或 filter: drop-shadow() 替代；后者支持过渡但作用于元素轮廓，有渲染差异；高阶渐变需伪元素叠加+opacity 交叉淡入淡出。
text-shadow 本身不支持 CSS 过渡，必须用 opacity 或 filter 替代
直接对 text-shadow 属性加 transition 不会生效——这是浏览器规范限制，不是写法错误。Chrome、Firefox、Safari 均不支持 text-shadow 的插值过渡，哪怕你写了 transition: text-shadow 0.3s，变化也是突变的。
可行路径只有两条：用 opacity 控制整体透明度变化（适合淡入/淡出），或 用 filter: drop-shadow() 配合 transition（更接近阴影渐变，但有渲染差异）。
用 filter: drop-shadow() 实现可过渡的“类 text-shadow”效果
filter: drop-shadow() 是 SVG 滤镜，支持 CSS 过渡，且语法与 text-shadow 接近（drop-shadow(x y blur color)），但它作用于整个元素轮廓，不是逐字符渲染。这意味着：文字有描边、内阴影、或使用了 clip-path 时，阴影形状可能偏移；另外，它不响应 text-stroke 或 background-clip: text 等文本裁剪行为。
- 必须用
filter而非-webkit-filter（现代浏览器已无需前缀） - 不能和
transform同时触发硬件加速，否则某些旧版 Safari 会丢弃阴影 - blur 值单位只能是
px，不支持em或rem
h1 {
transition: filter 0.4s ease;
}
h1:hover {
filter: drop-shadow(2px 2px 8px rgba(0, 100, 255, 0.6));
}
真正需要“阴影颜色/大小渐变”时，得靠 JS + 多层伪元素模拟
如果设计要求阴影从红色 → 蓝色、或从模糊 → 锐利，仅靠单个 filter 或 opacity 无法实现——因为 drop-shadow() 不支持多值过渡，也不能分别控制 x/y 偏移和 blur 的独立缓动。
立即学习“前端免费学习笔记（深入）”；
此时稳妥做法是用 ::before 和 ::after 叠加两层文字，各自带不同 text-shadow，再用 opacity 交叉淡入淡出：
- 主元素保留清晰文字，
::before绘制第一组阴影，::after绘制第二组 - hover 时，
::before的opacity从 1→0，::after从 0→1 - 两层都需
pointer-events: none，避免遮挡点击 - 注意 z-index 顺序，确保文字始终在最上层
.fancy-text {
position: relative;
color: #333;
}
.fancy-text::before,
.fancy-text::after {
content: attr(data-text);
position: absolute;
top: 0; left: 0;
pointer-events: none;
}
.fancy-text::before {
text-shadow: 1px 1px 2px #ff6b6b;
opacity: 1;
transition: opacity 0.35s;
}
.fancy-text:hover::before {
opacity: 0;
}
.fancy-text::after {
text-shadow: 2px 2px 6px #4ecdc4;
opacity: 0;
transition: opacity 0.35s;
}
.fancy-text:hover::after {
opacity: 1;
}
移动端和低性能设备上的实际表现差异
filter: drop-shadow() 在 iOS Safari 15.4+ 上渲染正常，但 iOS 14 及更早版本存在阴影闪烁或不绘制问题；Android Chrome 对多层 text-shadow 的伪元素方案兼容性更好，但频繁触发 opacity 过渡可能引起低端机掉帧。
如果目标用户包含大量微信内置浏览器（X5 内核），建议放弃 filter 方案——X5 对 drop-shadow 支持极差，且不触发硬件加速，阴影常显示为纯黑块。此时唯一稳定路径就是单层 text-shadow + opacity 渐变，接受“阴影整体变淡”而非“阴影属性渐变”。
