text-shadow多层值必须每层含水平偏移、垂直偏移、模糊半径三参数，缺一即失效；SCSS中需用unquote(join())处理阴影列表，避免引号包裹导致浏览器忽略；偏移与模糊须同步缓变，颜色推荐HSL动态计算以适配明暗模式及背景对比度。
text-shadow多层值必须含三参数，缺一不可
直接写text-shadow: 1px 1px #000, 2px 2px #333会静默失效——浏览器要求每层都带「水平偏移、垂直偏移、模糊半径」三值，漏掉blur就当整条声明无效。旧版 Safari 连0都不认，至少写0.1px。
- 正确写法：
"#{$i}px #{$i}px 0.#{round($i * 2)}px #000"（引号包裹，三值齐全） - 别用
0或空值占位，0.1px是兼容底线 - 移动端慎用>8px模糊半径，Android WebView 会强制降采样，边缘发虚
SCSS函数返回阴影列表必须unquote(join())
SCSS函数若直接@return $shadows，编译后变成带双引号的字符串"1px 1px 0.2px #000, 2px 2px 0.4px #333"，浏览器直接忽略整条text-shadow声明。
- 必须两步走：
join(", ", $shadows)拼接，再套unquote()去最外层引号 - 每一层阴影必须是字符串字面量（加引号），不能传
rgba()或darken()——它们提前求值后会被当作文本处理，颜色就固定死了 - 示例：
@function text-shadow-stack($list) { @return unquote(join(", ", $list)); }
@for循环控制层数和偏移节奏，避免线性爆炸
写死1px, 2px, 3px...会让第5层突然飘远，失去“贴附感”。真实景深是缓变的：内层微动，外层渐远。
- 用
@for $i from 1 through 3起步，桌面端可升到5–6层，移动端建议≤4层 - 偏移别用
#{$i}px，改用#{$i * 0.8px}或#{$i * 1.2px}控制增长节奏 - 水平/垂直偏移要同步递增（如
#{$i}px #{$i}px），否则立体感歪斜 - 模糊半径别超偏移量3倍，否则阴影断裂、悬浮感过强
颜色用HSL动态计算比手写十六进制更可控
手写#ccc, #999, #666容易断层；用hsl(0, 0%, #{95 - $i * 5}%)能平滑衰减亮度，适配不同背景对比度。
立即学习“前端免费学习笔记（深入）”；
- 描边层推荐纯色（
hsl(0, 0%, 20%)），高光层用rgba(255,255,255,0.6)模拟反射 - 深色模式下只需
@media (prefers-color-scheme: dark)覆盖颜色，不用动结构 - 背景为渐变或图片时，阴影颜色必须做对比度适配，否则OLED屏上直接消失
顺序本身不影响渲染结果，但调试时按「从近到远」排列（小偏移在前、大偏移在后）更直觉；真正容易被忽略的是字体栅格化像素对齐——所有偏移和模糊单位若用rem而非px，才能随clamp()字号真正响应式缩放。
