text-shadow四方向偏移是实现文字描边最稳、最兼容的方式，需用±1px整数偏移、blur-radius为0的阴影包围文字，firefox/chrome/safari/edge全线支持；单个text-shadow仅为单向投影，无法围住文字形成完整描边，必须多方向叠加才能避免漏光、确保边缘硬朗。
直接用 text-shadow 四方向偏移是实现文字描边最稳、最兼容的方式，Firefox、Chrome、Safari、Edge（含旧版）全支持，不需要私有属性，也不依赖透明填充。
为什么单个 text-shadow 不能当描边用
写 text-shadow: 1px 1px 0 #000 看起来只有右下角一条边，本质是投影，不是围住文字的“线”。描边需要从上下左右、甚至斜角把文字完整包住，否则边缘漏光、不均匀。
- 所有偏移必须是整数像素（如
-1px、0、1px），非整数（如0.5px）在部分浏览器会触发亚像素渲染，导致发虚 -
blur-radius必须为0，哪怕写成0.1px或漏掉，边缘就变软，失去“硬边描边”效果 - 颜色要和背景有足够对比，否则描边视觉上“消失”，比如深色字配深色描边
四方向 vs 五方向：text-shadow 描边怎么选参数
小字号（≤18px）用四方向更干净；中大字号或需更饱满轮廓，补上正交中间层（共五层）更稳妥。
- 四方向（推荐起手）：
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 - 五方向（加厚/防漏）：
text-shadow: 0 0 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 - 描边加粗？把
1px换成2px即可，但超过2px后非 Retina 屏易出锯齿，慎用
Retina 屏描边变细或发虚怎么办
MacBook、iPhone 等设备 dpr ≥ 2，CSS 的 1px 偏移实际只占 0.5 物理像素，肉眼难辨。这不是代码错，是渲染机制决定的。
- 别全局把
1px改成2px——普通屏会太粗 - 用媒体查询按 dpr 微调：
@media (-webkit-min-device-pixel-ratio: 2) { .title { text-shadow: -0.5px -0.5px 0 #000, ... } } - 同时补足方向数（如从 4 向扩到 8 向），弥补亚像素偏移带来的覆盖缺口
- 单位坚持用
px，em或rem在 font-size 动态变化时会失准
容易被忽略的三个硬性前提
哪怕参数全对，以下三点任一不满足，描边就可能“看不见”或“不对劲”：
- 文字本身不能是
color: transparent或rgba(0,0,0,0)——text-shadow需要文字内容作为载体，没内容就没影子 - 父容器不能设
overflow: hidden或clip-path，否则负偏移部分（如-1px）会被裁掉 - 不能和
-webkit-text-stroke混用——WebKit 下两者叠加，描边变重、边缘发糊，且 Firefox 完全无视后者
真正麻烦的是：同一组 text-shadow 值，在 Windows 高分屏、macOS Retina、iOS Safari、深色模式下，视觉重量可能差一倍。实机多测比查文档管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
