推荐用.text-shadow(@shadows...)混合器封装多层阴影，支持可变参数、自动逗号拼接；兼容IE需分离.text-shadow-legacy()；混用描边时注意属性顺序与模糊值；性能敏感场景避免动画修改blur、控制层数≤3。
text-shadow混合器怎么写才支持多层阴影
Less里直接写text-shadow容易重复、难维护，尤其要叠加3层阴影（比如浮雕+外光晕+内压暗）时。用混合器封装是必须的，但关键在于参数设计——不能只传一个shadow值，得拆成可变数量的元组。
推荐用.text-shadow()接收可变参数列表，内部用each()遍历生成逗号分隔的阴影链：
.text-shadow(@shadows...) {
@shadow-list: ~`@{shadows}.map(function(s) { return s; }).join(', ')`;
text-shadow: @shadow-list;
}
调用时传入每个阴影的偏移、模糊、颜色，例如：
.title {
.text-shadow(
1px 1px 2px rgba(0,0,0,0.3),
-1px -1px 1px rgba(255,255,255,0.5),
0 0 8px rgba(100,150,255,0.7)
);
}
注意：Less 3.8+才支持@shadows...语法；旧版本需改用@shadows: ...配合extract()手动拼接。
立即学习“前端免费学习笔记（深入）”；
如何兼容IE滤镜与现代text-shadow
IE9以下不支持text-shadow，但filter: glow()或dropshadow()能模拟基础效果。混合器里不能简单加filter，因为现代浏览器会同时渲染两套导致过亮或重影。
正确做法是用not all媒体查询隔离IE，或通过条件判断控制输出：
- 用
.text-shadow-legacy()单独封装IE专用版本，仅在需要兼容时显式调用 - 避免在同一个选择器里混写
text-shadow和filter，否则Chrome/Firefox会忽略filter但保留text-shadow，而IE则只认filter - 如果必须共存，用
@supports (text-shadow: 0 0 0 #000)包裹现代版，让IE自动跳过
文字描边（stroke）和阴影混用时的层级陷阱
text-shadow本质是“在文字轮廓外绘制模糊块”，而-webkit-text-stroke是描边，两者叠加时视觉顺序取决于渲染引擎——Safari可能把描边压在阴影上，Firefox则相反。
实操建议：
- 描边色用透明度
rgba(0,0,0,0.1)而非纯黑，避免遮盖阴影细节 - 阴影的
blur值必须大于描边宽度，否则边缘会发虚或断开 - 不要依赖
z-index——文本装饰没有堆叠上下文，层级由属性解析顺序决定：先写的text-shadow在底层，后写的在上层
例如想实现“白字+黑描边+蓝外光”，顺序必须是：color: white → -webkit-text-stroke: 1px black → text-shadow: 0 0 4px blue。
性能敏感场景下text-shadow的避坑点
动画中频繁修改text-shadow（比如hover放大+阴影扩散）会触发重排重绘，尤其在移动端掉帧明显。
能绕开就绕开：
- 用
transform: scale()代替改变text-shadow的blur值——模糊半径变化强制GPU合成，而缩放走transform管线更轻量 - 阴影数量别超3层，每增加一层，渲染耗时非线性增长；iOS Safari对超过2层的
text-shadow有明显卡顿 - 避免在
body或高频率重绘容器（如position: fixed导航栏）里全局启用复杂阴影
最隐蔽的问题：用text-shadow模拟粗体（比如0 0 1px #000）会导致字体抗锯齿失效，在Retina屏上文字发虚——这种“伪加粗”不如直接换font-weight或woff2字体。
