-webkit-text-stroke在复杂背景下不可靠，因其描边向内外等量扩展，导致发虚、颜色污染、层级错乱；稳定方案是text-shadow八层硬边+伪元素双层控制。
-webkit-text-stroke 在复杂背景（比如渐变、图片、深色+浅色混合区域）下基本不可靠：它不区分前景/背景，描边会向文字内外等量扩展，导致边缘发虚、颜色污染、层级错乱。真正在复杂背景下稳定描边的，只有 text-shadow + 伪元素双层控制这一条路。
为什么不用 -webkit-text-stroke 做复杂背景描边
它不是“描外边”，而是“在字形轮廓上画一条线”，这条线同时覆盖文字内部和外部像素。当背景本身有明暗变化时，描边颜色会与背景混合出不可控灰阶；更致命的是，它无法单独控制描边的 z 轴位置——你没法让它“只压住背景，不遮文字”。实测中，在 background: linear-gradient(...) 或 background-image: url(...) 上直接用 -webkit-text-stroke，描边常出现断点、毛边、颜色偏移。
- 描边宽度为
2px时，实际占用约4px总空间（内外各2px），在小字号或高缩放下极易糊成一团 - 不支持
text-stroke-color: transparent，也没法用rgba()控制描边透明度来适配多变背景 - Firefox 和部分旧 Edge 完全忽略该属性，降级后文字直接变实心无描边
text-shadow 多层模拟描边的关键参数组合
核心是用 8 层阴影围出闭合轮廓，而非常见的 4 层。4 层（±1px ±1px）在斜角和曲线处必留缺口，尤其对字母 o、e、S 等。8 层能覆盖所有方向：上下左右 + 四个对角。
- 必须设
color: transparent，否则文字本体颜色会盖住阴影 - 所有阴影的模糊半径必须为
0：text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; - 描边粗细由偏移量决定：想实现
1.5px描边？用1px和2px混合偏移，例如1px 0 0+2px 0 0+0 1px 0+0 2px 0……但注意总层数别超 12，否则 Safari 会丢弃多余阴影
伪元素接管描边层，解决定位与层级冲突
把 text-shadow 全部写在伪元素上，主文字只负责内容和颜色，这样描边可独立定位、缩放、甚至加 transform 微调。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，否则::before会相对body定位，飘走 - 伪元素
content: attr(data-text)，要求 HTML 中对应元素带data-text="标题"属性；静态文案可用content: "标题" - 描边伪元素要加
z-index: -1，但前提是它已设position: absolute——没position的z-index无效 - 若主文字有
text-decoration: underline，伪元素描边会盖住下划线，此时得把下划线也挪到伪元素里用::after实现
响应式描边在缩放/Retina 屏下的自适应技巧
纯 px 偏移在 transform: scale(0.75) 或 2x 屏上会变细，看起来像没描边。解决方案不是换单位，而是用 calc() 动态补偿：
- 在
@media (-webkit-min-device-pixel-ratio: 2)里，把所有1px偏移改成0.5px，2px改成1px - 更通用的做法：用
font-size基准，比如text-shadow: calc(1px * 1 / var(--scale)) 0 0 #000，再配合 JS 注入--scaleCSS 变量 - 绝对不要用
box-shadow替代描边——它的模糊半径在高 DPI 下发虚，且无法精确控制八个方向的硬边
最易被忽略的一点：伪元素描边层一旦用了 transform（比如 scale() 或 translateZ()），就可能触发 GPU 合成层，导致在某些安卓 WebView 中文字渲染异常（锯齿、闪动）。如非必要，保持描边层为纯位移定位。
