长阴影效果本质是多层text-shadow沿固定方向逐层偏移并渐变加深颜色，可用Less循环Mixin实现可配置的自动生成功能。
长阴影效果的本质是多层 text-shadow 叠加
所谓“长阴影”，其实是用 CSS 的 text-shadow（或 box-shadow）沿固定方向逐层偏移、逐层加深颜色，形成斜向拉伸的渐变阴影。纯 CSS 手写几十层很痛苦，Less 的循环 Mixin 正好解决这个重复问题。
关键点在于：每层阴影的 x 和 y 偏移必须同步递增，颜色通常从透明到深色（如 rgba(0,0,0,0.05) → rgba(0,0,0,0.9)），不能简单用固定色值。
常见错误是把循环变量当颜色值直接拼接，比如 rgba(0,0,0,@i) —— 这会报错，因为 Less 不允许在 rgba() 里直接用未计算的变量做 alpha 参数。
用 .long-shadow() Mixin 实现可配置的循环
下面是一个稳定可用的带参数 Mixin，支持指定方向、层数、颜色起点与终点、模糊半径：
立即学习“前端免费学习笔记（深入）”；
.long-shadow(@direction: down, @steps: 20, @color-start: rgba(0,0,0,0.02), @color-end: rgba(0,0,0,0.8), @blur: 0) {
@step-x: if(@direction = right, 1, if(@direction = left, -1, 0));
@step-y: if(@direction = down, 1, if(@direction = up, -1, 0));
<p>.long-shadow-loop(@i: 1) when (@i =< @steps) {
@current-alpha: unit((@i / @steps) <em> (alpha(@color-end) - alpha(@color-start)) + alpha(@color-start), "");
@current-color: rgba(red(@color-start), green(@color-start), blue(@color-start), @current-alpha);
@x-offset: @step-x </em> @i;
@y-offset: @step-y * @i;</p><pre class="brush:php;toolbar:false;">& when (@i = 1) {
text-shadow: ~"@{x-offset}px @{y-offset}px @{blur}px @{current-color}";
}
& when (@i > 1) {
text-shadow+: ~"@{x-offset}px @{y-offset}px @{blur}px @{current-color}";
}
.long-shadow-loop(@i + 1);}
.long-shadow-loop(1); }
使用时只需调用：.long-shadow(down, 30, rgba(0,0,0,0.01), rgba(0,0,0,0.7));
-
@direction支持up/down/left/right，其他值默认不偏移 -
@steps超过 50 层会导致编译慢，且浏览器渲染无明显提升，建议 15–40 -
@blur设为 0 更接近“硬边长阴影”；设为 1–2 可模拟轻微柔化效果 - 注意：Less 的
alpha()函数只接受 rgba 颜色，传入 hex 或关键字色会返回 1，导致渐变失效
用 box-shadow 复刻长阴影时需绕开两个坑
如果想给块级元素（如按钮）加长阴影，用 box-shadow 替代 text-shadow，但有两处必须手动处理：
- Less 无法用
+操作符拼接多个box-shadow值（box-shadow+无效），必须用字符串拼接 +~""解析 -
box-shadow不支持单侧偏移叠加，要模拟“向下长阴影”，得让每层的x和y同步增长，否则会变成斜线而非垂直条带
修正后的 box-shadow 版本核心片段：
& when (@i = 1) {
box-shadow: ~"@{x-offset}px @{y-offset}px @{blur}px @{current-color}";
}
& when (@i > 1) {
box-shadow+: ~"@{x-offset}px @{y-offset}px @{blur}px @{current-color}";
}但注意：现代浏览器对超长 box-shadow 列表的性能更敏感，超过 30 层可能触发重绘卡顿，此时建议改用 SVG 或伪元素分层实现。
编译后 CSS 体积和兼容性要心里有数
一个 @steps: 30 的 .long-shadow() 会生成 30 行 text-shadow，压缩后约 1.2KB —— 看似不大，但如果全站多个组件都用，容易累积成冗余样式。
- IE10+ 和所有现代浏览器都支持多层
text-shadow，但 Android 4.3 及以下对超过 10 层的支持不稳定 - 不要在
:hover里动态调用该 Mixin，它无法运行时重算，只能预编译 - 若设计稿要求响应式长阴影（如小屏减层数），需配合媒体查询 + 多套 Mixin 调用，不能靠参数动态响应
最易被忽略的是颜色插值逻辑：很多人直接线性插值 alpha，但人眼对暗部更敏感，实际用 pow(@i / @steps, 0.6) 调整曲线会更自然——这点没法靠参数自动适配，得手动改 Mixin 内部公式。
