Less中多层box-shadow必须用英文逗号分隔，否则仅首层生效；推荐用可变参数mixin封装，inset需显式置于每层开头，避免IE滤镜及错误前缀。
box-shadow 多层写法容易漏掉逗号分隔
Less 里写多层 box-shadow，不是简单空格堆叠，必须用英文逗号分隔每组值，否则编译后只剩第一层。很多人复制 CSS 过来直接贴进 Less，忘了逗号，结果阴影只显示最外层。
- 正确格式：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08); - 错误写法：
box-shadow: 0 2px 4px rgba(0,0,0,0.1) 0 4px 12px rgba(0,0,0,0.08);（缺逗号 → 后半被忽略） - Less 变量拼接时也要注意：如果用插值
@{shadow-outer}, @{shadow-inner}，确保变量本身不带尾随逗号，否则会多出一个
封装 mixin 要支持单层 / 多层灵活传参
硬编码固定层数的 mixin 很快就不够用——按钮要两层，卡片要三层，弹窗还要加内阴影。直接写死参数数量会逼人重复定义多个版本。
- 推荐用可变参数（
...）接收任意层数：.shadow(@shadows...) { box-shadow: @shadows; } - 调用时保持原生语法习惯：
.shadow(0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08)); - 避免把颜色/尺寸拆成独立参数（如
.shadow(@x, @y, @blur, @color)），那样组合多层时嵌套太深、难维护
内阴影 inset 和外阴影混用时顺序不能错
inset 关键字必须紧贴在对应那层阴影的开头，且所有 inset 都要显式写出。Less 不会帮你补，编译器也不会报错，但浏览器直接忽略整条声明。
- 正确：
.shadow(0 2px 4px rgba(0,0,0,0.1), inset 0 0 8px rgba(0,0,0,0.05)); - 错误：
.shadow(0 2px 4px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.05) inset);（inset放后面 → 整条失效） - 如果封装带 inset 的快捷 mixin（比如
.shadow-inner()），内部仍要用完整inset ...形式，别试图“自动加”关键字
IE 兼容性下 filter: progid:DXImageTransform.Microsoft.Shadow 早该弃用
现在还为 IE8–9 写 filter 滤镜，不仅代码臃肿，而且和 box-shadow 共存时极易冲突——滤镜会覆盖掉标准属性，或者导致圆角失效。除非项目明确要求支持 IE9 以下，否则别碰。
- 现代项目只需关注
box-shadow+inset组合，所有主流浏览器都支持多年 - 若真需降级，用
@supports (box-shadow: 0 0 0 #000)包一层更干净，而不是回退到 filter - Less 编译本身不处理兼容性，别指望它自动加前缀或 fallback
实际用的时候，最容易卡住的是 mixin 参数里那个省略号 ... 的位置，以及多层之间到底要不要加括号——其实都不用，就按原生 CSS 写法来，Less 会原样透传。别为了“看起来像函数”自己加多余结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
