8层text-shadow是模拟真实描边的必要条件，因单层仅能覆盖一个方向，必须用±1px偏移覆盖上、下、左、右及四角共8个方向才能围成封闭路径，缺一则露白或断连，且所有层blur-radius必须为0、偏移量须为整数像素。
text-shadow为什么必须用8层才能模拟真实描边
单层text-shadow: 1px 0 #000只能画出右边一条线，文字四个方向加四角（上/下/左/右/左上/右上/左下/右下）共8个偏移点，才围成封闭路径。少一层，比如漏掉-1px -1px，左上角就会露白底或断连。
常见错误现象：描边在某个角度“断开”、深色背景上看到文字本体透出、iOS Safari里部分阴影消失——大概率是层数不足或偏移值不全。
- 所有8层的
blur-radius必须为0，写0.1px或省略都会导致边缘发虚 - 偏移量严格用
±1px或±$thickness，别用em单位，否则嵌套元素中因font-size变化导致描边错位 - 调用时若传
0.125rem，需确保该值在像素网格上对齐（如16px字号下0.125rem=2px），否则高DPI屏上描边抖动
@mixin text-stroke里$thickness参数怎么设才安全
$thickness不是“描边粗细”的直觉映射，而是每个方向阴影的偏移绝对值。设为2px时，左右总宽实际增加4px，上下同理——这会影响行高和布局，不能无脑加大。
性能与兼容性影响：Android低版本WebView对超过8层text-shadow会降采样；iOS Safari在color: transparent + 多层描边组合下，曾有丢影bug（iOS 15–16），建议真机验证。
- 推荐默认值用
1px，适配大多数字体大小；标题类可升到2px，正文段落别超1.5px - 禁止用
em或%，只接受px、rem等绝对单位 - 若需响应式，改用
clamp()包裹变量：clamp(1px, 0.0625rem, 2px)，但注意Sass编译时不识别clamp()，得写在CSS层
SCSS循环生成text-shadow时最容易漏掉的三件事
手写8层没问题，但用@each或@for生成时，常因语法细节失效：浏览器静默忽略整条text-shadow声明，控制台也不报错。
典型错误示例：text-shadow: 1px 1px #000, 2px 2px #333; —— 缺blur-radius，Safari直接当无效值丢弃。
- 每一层必须显式写出三值：
#{$x} #{$y} 0 $color，0不能省略 - 拼接后必须用
unquote()去掉最外层引号，否则编译结果是"1px 1px 0 #000, 2px 2px 0 #333"，带引号的字符串浏览器不认 - 颜色别在Mixin里调
darken($color, 10%)，它会在编译期求值成固定色值，失去主题切换能力；改用HSL动态计算：hsl(hue($color), saturation($color), #{lightness($color) - 5}% )
描边+阴影叠加时text-shadow顺序要不要讲究
顺序不影响最终渲染结果——CSS规范规定text-shadow各层是并列生效，不是Z轴叠放。但调试时顺序乱了，很容易改错参数。
建议按“描边层在前、阴影层在后”组织：先8层0模糊的描边，再加1–2层带blur-radius的投影。这样符合直觉，也方便后续加动画或状态变体（比如悬停时只动阴影层）。
- 描边层统一用
0模糊，阴影层用2px 2px 4px rgba(0,0,0,0.3)这类值 - 别把描边和阴影混在同一个循环里生成，逻辑耦合后难以单独开关某一层
- 移动端真机上阴影糊成一团？优先检查
blur-radius > 8px或font-size ，这两项比顺序问题更致命
描边效果越精细，对字体抗锯齿和设备像素比越敏感。-webkit-font-smoothing: antialiased不是可选项，是必加项；而text-shadow本身不触发GPU加速，大量使用时滚动卡顿往往就从这里开始。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
