Less中应封装.card-hover-lift(@lift: -4px, @shadow: 0 12px 24px rgba(0,0,0,0.12))混入，显式声明transform与box-shadow的transition，设置position: relative和hover时z-index: 2，并用@media (hover: none)适配移动端。
Less中怎么写卡片悬浮提升的混合宏
要实现卡片悬停时的“提升”效果，核心是同时改变 transform: translateY() 和 box-shadow。直接在每个卡片类里重复写这两条样式不现实，用 Less 混合宏（.card-hover-lift()）封装最干净。
混合宏里必须把位移和阴影参数都设为可选，默认值要兼顾视觉合理性：位移太小看不出效果，太大又显得突兀；阴影太淡没层次，太浓像浮空。实测 @lift: -4px 配合 @shadow: 0 12px 24px rgba(0,0,0,0.12) 在多数背景上表现稳定。
示例写法：
.card-hover-lift(@lift: -4px, @shadow: 0 12px 24px rgba(0,0,0,0.12)) {
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
&:hover {
transform: translateY(@lift);
box-shadow: @shadow;
}
}
调用时可覆盖默认值：
.product-card {
.card-hover-lift(-6px, 0 16px 32px rgba(0,0,0,0.16));
}
为什么不能只用 transition: all
all 看似省事，但实际会拖慢渲染、触发重排，并可能意外过渡其他属性（比如 opacity 或 color），导致悬停时出现非预期的渐变或闪烁。
明确列出要过渡的属性更安全：
-
transform和box-shadow都是 GPU 可加速的属性，性能好 - 使用同一段
cubic-bezier()曲线，让位移和阴影变化节奏一致，视觉更自然 - 避免给
transition加过长的持续时间（比如超过0.3s），否则提升感变“迟钝”
响应式场景下如何适配移动设备
移动端没有 :hover，盲目保留提升效果反而浪费资源，还可能干扰触摸反馈。
正确做法是用媒体查询关掉 hover 行为：
@media (hover: none) and (pointer: coarse) {
.card {
&:hover {
transform: none;
box-shadow: none;
transition: none;
}
}
}
注意两点：
-
@media (hover: none)是判断“无悬停能力”的关键条件，比单纯查屏幕宽度可靠 - 不要用
@supports (hover: hover)—— 它在部分安卓浏览器里误报，导致桌面端反而失效
阴影层级与 z-index 的配合陷阱
卡片提升后若被邻近元素遮挡，不是因为 transform 没生效，而是 z-index 层级没跟上。
常见错误：
- 只加
transform，没设position: relative—— 导致z-index不生效 - 所有卡片共用同一
z-index值，悬停时仍被同层兄弟盖住 - 父容器用了
overflow: hidden，把提升后的阴影直接裁掉
稳妥方案：
.card {
position: relative;
z-index: 1;
&:hover {
z-index: 2; // 必须显式提升层级
}
}
如果卡片在网格布局中，且父容器有 overflow: hidden，要么去掉该属性，要么改用 padding 或 margin 预留阴影空间——阴影本身不会触发溢出裁剪，但超出父盒的部分确实看不见。
真正容易被忽略的是：提升效果是否在深色模式下依然清晰。建议阴影颜色用 rgba(0,0,0,0.12) 这类相对透明度值，而不是固定灰度，否则在暗背景上会发虚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
