css中可在:hover里用自定义属性控制scale：先在元素上声明变量（如--card-scale:1），transform:scale(var(--card-scale))并设transition；hover时修改变量值（--card-scale:1.08），浏览器自动重算transform实现平滑缩放。
怎样在 :hover 中用 CSS 自定义属性控制 scale
直接写 transform: scale(var(--scale, 1.05)) 是无效的——CSS 不允许在 transform 里直接插值自定义属性，必须配合 calc() 或声明在支持动态计算的上下文中。真正可行的方式是：把缩放值预先定义为变量，再在 :hover 里通过修改该变量触发重计算。
- 在根元素或卡片选择器上声明初始变量，例如：
:root { --card-scale: 1; } - 卡片默认样式中使用该变量：
transform: scale(var(--card-scale)); transition: transform 0.2s ease; -
:hover里只改变量值：--card-scale: 1.08;，浏览器会自动重算transform - 注意：变量必须声明在作用域内（如卡片自身或其父容器），不能只写在
:root里又指望单个卡片独立控制
为什么 scale 值设成 1.08 而不是 1.1 就更自然
视觉上，scale(1.1) 容易显得“弹跳感过强”，尤其卡片有阴影或圆角时，边缘拉伸明显。1.04–1.08 是更稳妥的区间，兼顾反馈感与克制性。
- 1.08 对应约 8% 尺寸增长，人眼感知清晰但不突兀
- 若卡片含文字，缩放超过 1.08 可能导致行高/字间距轻微错位（尤其用了
rem或em） - 移动端需额外加
@media (hover: hover)包裹，避免触屏设备误触发
如何让多个卡片各自独立缩放而不互相干扰
关键在变量作用域——每个卡片必须有自己的变量实例，不能全靠 :root 统一控制。
- 给卡片加类名并单独声明变量：
.card-1 { --card-scale: 1; } .card-1:hover { --card-scale: 1.06; } - 或用
style属性内联初始化：<div class="card" style="--card-scale: 1">，再在 CSS 中覆盖 <li>避免用 JS 动态设 <code>style.setProperty控制 scale——这会绕过 CSS 过渡，导致无动画 - 若用 CSS-in-JS（如 styled-components），确保变量注入到对应元素，而非全局
- 加
transform: translateZ(0)或will-change: transform强制 GPU 加速（但慎用will-change，仅对频繁交互元素） - 阴影改用
filter: drop-shadow()，它比box-shadow更适应缩放变形 - 边框用
outline替代（无圆角限制），或把border-radius改成clip-path: inset(0 round 8px)，后者缩放更稳定 - 测试时务必在 Safari 和 Chrome 同时检查，Safari 对
transform+filter组合渲染差异较大
transform 缩放时阴影和边框为啥会糊？怎么修
缩放本质是像素重采样，scale 非整数倍时，浏览器对 box-shadow 和 border-radius 的抗锯齿处理容易失准，尤其在高 DPI 屏幕上。
transform 属性。别试图给 --card-scale 加 transition，那没用。
