如何在Less中使用合并属性特性优雅合并CSS变换和阴影-css教程-PHP中文网

Less中transform+\_:和box-shadow+:必须配对使用，需先声明基础值（如transform: translateZ(0)、box-shadow: none），否则后续叠加无效；语法上transform用空格分隔函数，box-shadow用逗号分隔多层阴影。

如何在less中使用合并属性特性优雅合并css变换和阴影

Less中`transform+_:` 和`box-shadow+:` 必须配对使用才有效

单独写transform+_: rotate(10deg)不会报错，但编译后可能被覆盖或丢弃——因为transform是单值属性，合并依赖前序定义存在。必须先有基础transform声明（哪怕为空），后续的+_: 才能追加。

常见错误现象：只在&:hover里写transform+_: translateY(-4px)，结果 hover 时没变化。原因就是父级没定义初始transform: none或transform: translateZ(0)，导致合并无基底可依。

正确做法是在基础类中显式初始化：transform: translateZ(0);，再在混入中用transform+_: 叠加
box-shadow+: 同理，需先有box-shadow: none;或默认值，否则第二次+: 可能被忽略
不要跨选择器合并：.card { box-shadow+: 0 2px 4px rgba(0,0,0,.1); } 和 .card:hover { box-shadow+: 0 8px 16px rgba(0,0,0,.15); } 是安全的；但若把后者写在另一个 class 里，编译顺序不确定，容易丢失

为什么`transform+_:` 用空格分隔而`box-shadow+:` 用逗号

CSS 规范决定的：transform 属性值本身就是空格分隔的函数序列（scale(1.1) rotate(5deg) translateX(2px)），所以+_: 自然沿用空格；box-shadow 支持多层阴影，每层之间用逗号分隔，因此+: 也对应逗号。

混淆后果很直接：若误用transform+: （带逗号），编译后变成transform: scale(1.1), rotate(5deg)，浏览器直接忽略整条声明；反过来，box-shadow+_: 会产出box-shadow: 0 2px 4px #000 0 8px 16px #000，语法非法，整行失效。

记口诀：“transform 拼接靠空格，shadow 多层靠逗号”
所有+_: 操作都要求右侧值是合法的 CSS 函数或数值，不能带单位混用（如transform+_: scale(1.2) 10px非法）
Less 1.7+ 支持@{var}+_: 动态拼接，但变量必须提前解析为完整函数字符串，比如@rotate: ~"rotate(15deg)"; transform+_: @rotate;

合并变换时别漏掉`transform-style: preserve-3d`

当你用transform+_: rotateY(180deg) translateZ(50px)做翻转卡片，却只看到平面旋转——大概率是缺了transform-style: preserve-3d。这个属性不参与合并，必须单独、显式声明在父容器上。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

它和perspective是配套开关：没有preserve-3d，子元素的 3D 变换会被压平到父容器平面；而perspective控制景深感，建议设在包裹容器（如.card-wrapper）上，值取800px~1200px较稳。

混入封装时，transform+_: 只管拼函数，transform-style和perspective必须由调用方手动加，不能塞进同一个 mixin
移动端 Safari 对preserve-3d支持不稳定，若发现翻转卡顿或消失，加backface-visibility: hidden到子元素能缓解
不要在:hover里动态加transform-style——它不是可动画属性，只能初始设置

阴影与变换合并后，`transition`必须精简指定

合并后的box-shadow和transform都是可过渡属性，但一旦混入transition: all，就会拖垮性能。尤其在 iOS WebView 或旧版 Chrome 中，all会强制重排，导致悬停抖动甚至文字模糊。

真实项目里，你只该过渡这两项：transform和box-shadow。其他任何属性（opacity、color、background-color）都不该进队列。

写死过渡： transition: transform 0.25s ease, box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
避免用@arguments自动透传——它可能把border-color之类无关项也拖进来
进出场节奏不同：进入用快进缓出贝塞尔曲线，移出可不设，让浏览器自动反向；强行统一时长反而生硬

最易被忽略的是 z-index：合并提升效果后，若卡片被兄弟元素遮住，不是transform没生效，而是z-index没同步提升。务必在 hover 状态下显式写z-index: 10，且确保父容器不是position: static。