text-shadow必须严格按“水平偏移、垂直偏移、模糊半径、颜色”顺序书写，缺一或错序整条声明将静默失效；前两参数必填，后两可省略（模糊默认0，颜色默认currentcolor）。
text-shadow位移参数怎么写才不会失效
写错顺序或漏参数，text-shadow会静默失效——浏览器不报错，但阴影完全不出现。必须严格按「水平偏移、垂直偏移、模糊半径、颜色」四部分顺序书写，其中前两个是必填，后两个可省略（模糊半径默认为0，颜色默认为currentcolor，但依赖文字本身有颜色）。
常见错误写法：text-shadow: #000 2px 2px;（颜色提前）、text-shadow: 2px 2px 0;（缺颜色）、text-shadow: 2px #000 2px;（中间插颜色）。这些整条声明都会被忽略。
- 正向偏移（如
2px 2px）让阴影落在文字右下方，适合模拟主光源在左上方的常规投影 - 负值可用：比如
-1px -1px把阴影拉到左上方，常用于高光层或内凹效果 - 模糊半径设为
0时，Safari（尤其 iOS 14 前）可能直接跳过该层；稳妥起见统一写成0.1px
多层错位实现“层叠”而非“糊成一团”
堆5层全往右下偏移的text-shadow，结果只是阴影变厚、边缘发虚，并不是层叠错位。真要制造视觉分离感，得让各层朝不同方向微偏，且控制好模糊与透明度。
典型故障/错位结构用三色分层：rgba(255, 0, 0, 0.65)往左上偏、rgba(0, 255, 0, 0.6)居中微调、rgba(0, 0, 255, 0.55)往右下偏——红绿蓝三原色错开，才能还原信号干扰的“撕裂”本质。
- 偏移单位优先用
em或vw，避免固定px在响应式缩放时错位崩坏 - 每层透明度递减（如
0.65 → 0.6 → 0.55），防止叠加过曝、丢失层次 - 主文字层务必加
text-shadow: 0 0 1px #000做极细描边，否则错位后边缘露底、文字“消失”
为什么伪元素方案容易错位失败
想用::before和::after分别控制红蓝层？问题在于：它们默认继承父级font-size和line-height，一旦父容器有transform、vertical-align或flex对齐，各层基线就无法对齐，错位变成“错乱”。
更隐蔽的问题是：伪元素的content若用attr(data-text)动态注入，某些浏览器（如 Safari 16.6）会延迟渲染，导致动画帧不同步。
- 最稳做法：放弃伪元素，全部用单层
text-shadow逗号分隔实现——语义干净、无重排、渲染路径最短 - 若必须用伪元素（例如需要独立
animation-delay），请显式重置font-size: 1em; line-height: 1; vertical-align: baseline; - 所有动画必须用
animation-timing-function: steps(1, end)，禁用ease类缓动，否则偏移过程平滑 = 没有故障感
移动端性能抖动的临界点在哪
iOS Safari 对多层text-shadow的渲染压力比桌面端高得多，尤其是模糊半径 >2px 或层数 ≥5 时，滚动或hover动画易掉帧。这不是 bug，是 WebKit 渲染管线对文本阴影的合成策略限制。
实测安全阈值：小字号（≤16px）最多2层；标题类大字（≥40px）可放宽到4层，但模糊半径总和别超8px（例如1px 1px 2px, 2px 2px 2px, 3px 3px 2px, 4px 4px 2px）。
- 别在
@keyframes里动态改text-shadow值——CSS 动画引擎对它的优化远不如transform或opacity - 深色背景上慎用纯白高光层（如
rgba(255,255,255,0.9)），OLED 屏幕易产生光晕，视觉上反而像模糊 - 真正难控的是 Retina 和非 Retina 屏的像素密度差异：同一套
text-shadow值，在 Mac 和 iPhone 上的“厚度感”可能差一倍，必须真机连测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
