text-shadow多层叠加发灰是因alpha混合公式导致饱和度稀释和灰阶插值，并非写法错误；每层独立与背景混合，两层rgba(0,0,0,0.1)叠加后实际约rgba(0,0,0,0.19)，非预期0.2，且底层默认与白色画布混合加剧色差。
不是透明色“变脏”，而是多层 rgba() 叠加时浏览器按固定公式混合，天然稀释饱和度——这是渲染原理决定的，不是写法错误。
text-shadow 多层叠加为什么颜色发灰
每层 text-shadow 都会独立与当前背景做 alpha 混合，计算公式是 result = fg × α + bg × (1 − α)。两层 rgba(0, 0, 0, 0.1) 叠加后，实际得到的是约 rgba(0, 0, 0, 0.19)，而非预期的 0.2，且中间灰阶被反复插值，观感“发闷”“不干净”。
- 父容器没设背景色时，底层会和默认白色画布混合，调试时颜色完全对不上设计稿
- 三层及以上叠加，alpha 累积失真加剧，尤其在浅灰背景上极易显“脏”
- 斜向偏移（如
1px 1px）会让交角处叠加次数不均，右上角比正上方颜色更深，造成视觉断裂
避免发脏的实操组合
双层足够，关键在分工和梯度：
- 第一层：压实轮廓，用小偏移 + 零模糊 + 极低 alpha，例如
0 1px 0 rgba(0, 0, 0, 0.08) - 第二层：营造纵深，用稍大偏移 + 小模糊（≤2px）+ 略高 alpha（但差值 ≤0.03），例如
0 2px 2px rgba(33, 33, 33, 0.11) - 禁用纯黑/纯白：深色背景配
rgba(255, 255, 255, 0.3)，浅色背景用rgba(66, 66, 66, 0.2)这类带灰阶的基色
更稳的替代方案
如果必须强控制透明度层次，别硬叠 text-shadow：
立即学习“前端免费学习笔记（深入）”；
- 用伪元素模拟：给文字容器加
::before，inset: 0+background-color: rgba()+z-index: -1，只合成一次 - 需要描边效果时，放弃 4 向
text-shadow，改用-webkit-text-stroke: 1px #333（WebKit 有效）或双层文字定位法 - 对 SVG 文字或裁剪后形状，直接上
filter: drop-shadow()，它基于 Alpha 轮廓渲染，不走逐层混合逻辑
真正容易被忽略的是：哪怕只写一层 text-shadow: 0 0 4px rgba(0,0,0,0.1)，只要父容器自身有 opacity 或嵌套了其他 rgba 背景，就已触发多次混合——发脏往往从结构层级就开始了，不单是阴影本身的问题。
