价格卡片高亮需设 transform-origin: center center 防偏移，用多层 box-shadow 模拟立体感，禁用 width/height 过渡防重排；响应式按断点分 scale 值（手机 1.04、平板 1.06、桌面 1.08），仅过渡 transform 和 box-shadow，注意 pointer-events、overflow 及 z-index 影响。
直接用 transform: scale() 配合 box-shadow 实现价格卡片高亮，必须显式设 transform-origin: center center，否则缩放会偏移；box-shadow 不能只靠一层，得用多层模拟立体感，且必须避开 width/height 过渡——否则一 hover 就重排、卡顿、错位。
transform: scale() 居中放大总往上跑？fix transform-origin
常见错误现象：鼠标悬停时卡片突然“跳”到左上角，不是从中心均匀放大。这是因为浏览器按渲染时的盒模型中心算 transform-origin，而价格卡片常嵌在 flex/grid 容器里、没设固定宽高，导致实际中心点漂移。
- 给卡片根元素（比如
.price-card）加transform-origin: center center，别依赖默认值 - 如果卡片内部有绝对定位的角标（如 “BEST VALUE”），它也会被 scale 放大——得在角标上补
transform: scale(0.95)抵消 - 禁用
transition: all，只写transition: transform 0.25s ease, box-shadow 0.25s ease，避免意外触发其他属性动画
box-shadow 怎么写才不扁平？用双层/三层模拟景深
单层 box-shadow: 0 4px 12px rgba(0,0,0,0.1) 悬停时加粗，视觉上只是“变黑”，没有“浮起”感。真实立体反馈靠的是阴影分层——近层锐利、远层柔散。
- 基础态推荐：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08) - 悬停态增强：
box-shadow: 0 4px 6px rgba(0,0,0,0.15), 0 12px 20px rgba(0,0,0,0.12)（垂直偏移加大、模糊略增、透明度微升） - 别用
inset或负扩散值（如-2px），容易在 Safari 或旧 WebView 中裁剪失效
响应式下 scale 值不能写死，要分断点控制
桌面端 scale(1.08) 看着稳，但放到手机上手指一碰就撑出屏幕；反过来，移动端 scale(1.03) 在桌面又毫无反馈。硬套一个值等于放弃交互质量。
-
@media (max-width: 767px)：用scale(1.04)，兼顾小屏点击确认感与空间余量 -
@media (min-width: 768px) and (max-width: 1024px)：用scale(1.06)，补足平板触控精度落差 -
@media (min-width: 1025px)：用scale(1.08)，但上限别超1.1，否则可能裁切相邻卡片或遮挡按钮 - 所有断点里
transition-duration保持一致（推荐0.25s），节奏混乱比没动画更干扰用户
:hover 不生效？先查 pointer-events 和 overflow
写了 .price-card:hover { transform: scale(1.08); } 却没反应，90% 不是 CSS 写错，而是被父级静默拦截了。
- 检查外层是否有
pointer-events: none（比如为实现点击穿透加的蒙层） - 检查父容器是否设了
overflow: hidden，且卡片用了transform——这会导致渲染层被裁切，hover 区域实际失效 - 快速验证法：临时加
outline: 1px solid red到卡片上，看 hover 时红框是否准确套住内容区域 - 若卡片是
position: absolute，务必配z-index: 2，否则可能被兄弟元素盖住（哪怕视觉上没遮挡）
最易被忽略的是：缩放 + 多层阴影组合后，低端安卓 WebView 或 Safari 旧版本可能渲染模糊。加 backface-visibility: hidden 和 will-change: transform 能缓解，但别滥用——只对高频悬停的卡片加，否则反而拖慢首屏渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
