能给滚动文字加 text-shadow，但必须作用于含文本的内层元素（如 .scroll-text），而非动画容器；需用 transform 驱动动画、控制模糊半径 2–6px、避免 opacity/transformZ 干扰，并注意 IE9/Safari 兼容性限制。
text-shadow 能不能给滚动文字加阴影
能，但得看滚动怎么实现。原生 标签早已被废弃，现代做法全靠 CSS 动画 + text-shadow，两者不冲突，可以叠加使用。关键不是“能不能”，而是“加在哪一层生效”——阴影必须加在实际渲染文字的元素上，而不是父容器或动画容器。
滚动文字用 CSS 动画时，text-shadow 怎么写才有效
常见错误是把 IE10+ 和 Safari 6.1+ 均支持 本质是动画帧率不足或重绘策略问题。CSS 滚动动画若用 立即学习“前端免费学习笔记（深入）”；text-shadow 写在动画容器（比如 .scroll-wrapper）上，结果没效果。它必须作用于含文本的内层元素，例如 opacity 或 transform: translateZ()，可能触发新层叠上下文，导致阴影被裁剪或变淡。
text-shadow: 2px 2px 4px rgba(0,0,0,0.5); 是最稳妥的写法，避免用模糊值过大（如 20px）导致性能下降@keyframes 里动态改 text-shadow，浏览器对它的动画支持差，容易闪烁overflow: hidden，确保阴影范围在裁剪框内，否则会被直接切掉IE 或旧版 Safari 下 text-shadow 不显示怎么办
text-shadow，但 IE9 及更早版本完全不支持；Safari 在某些 transform 组合下会禁用阴影（尤其配合 will-change: transform）。这不是 bug，是渲染引擎限制。
filter: drop-shadow() 替代——它作用于整个元素盒，不是文字本身，边缘会糊、字形失真text-shadow + translateX 的闪烁问题，升级系统比 hack 更可靠滚动太快时阴影看起来“断续”或“抖动”
left 或 margin-left 驱动，会频繁触发 layout，阴影计算被拖慢；而用 transform: translateX() 可交由 GPU 加速，阴影渲染更连贯。
阴影本身很简单，难的是它和滚动动画、渲染管线、浏览器兼容性的咬合点——稍一错位，要么看不见，要么卡顿，要么只在 Chrome 里正常。transform，不能是 left、right 等触发布局的属性will-change: transform 到滚动元素上，提前提示浏览器优化，但别滥用，否则反而增加内存开销8px 后，每帧绘制成本明显上升，建议控制在 2px–6px 区间
