border悬停抖动源于重排，应改用outline+transform或box-shadow替代；需检查父容器布局、contain属性及图层合成，确保绿色边框在layers面板中出现。
直接用 border 变化做悬停切换，几乎必然抖动——它会触发重排（reflow），哪怕只是 1px 的边框粗细或颜色变化，浏览器都得重新计算布局、换行、行高、兄弟元素位置。真正稳的解法不是“怎么改 border”，而是绕开 border。
为什么 border 变化会抖动
border 属于 layout 属性：它直接影响元素盒模型尺寸（box-sizing: border-box 下也会影响内边距挤压）、内容区域可用宽度、甚至父容器高度（尤其当卡片高度由内容撑开时）。hover 瞬间加 2px solid 边框 → 宽度+2px、高度+2px → 周围卡片重排 → 视觉跳动。这不是动画慢，是布局引擎在每帧里反复干活。
用 outline + transform 替代 border
outline 不占据文档流，不改变尺寸，且支持 transition；配合轻微 transform: scale(1.005) 可模拟“边框膨胀感”，避免纯 outline 显得单薄。
-
outline必须设outline-offset（如-2px）才能紧贴元素边缘，否则默认有间隙 - 不要混用
border和outline：哪怕border: none，样式引擎仍可能保留 layout 计算路径 -
transform: scale()要配transform-origin: center center，否则缩放会偏移卡片位置 - 起始态加
outline: 2px solid transparent，hover 时只变 color，避免 outline 宽度插值导致的渲染不稳定
.card {
outline: 2px solid transparent;
outline-offset: -2px;
transition: outline-color 0.2s, transform 0.2s;
transform-origin: center center;
}
.card:hover {
outline-color: #ff6b81;
transform: scale(1.005);
}
更彻底的方案：用 box-shadow 模拟边框
当需要精确控制“边框”粗细、圆角匹配或支持 inset 效果时，box-shadow 是更可控的选择。它完全不参与布局计算，且能叠加多层阴影模拟立体边框。
- 单层外边框：
box-shadow: 0 0 0 2px #ff6b81 - 内边框（需配合
inset）：box-shadow: inset 0 0 0 2px #ff6b81，但注意它会覆盖部分内容，慎用于图文混合卡片 - 避免用
box-shadow+border-radius不匹配：卡片本身border-radius: 12px，那么 shadow 的扩散半径也要调低（如0 0 0 2px），否则圆角会模糊失真 - 过渡时只变 color，别动 spread 或 blur 值——它们虽不重排，但某些安卓 WebView 对 blur 插值渲染不稳定
.card {
border-radius: 12px;
box-shadow: 0 0 0 2px transparent;
transition: box-shadow 0.2s;
}
.card:hover {
box-shadow: 0 0 0 2px #ff6b81;
}
必须检查的三个隐藏陷阱
即使代码写对了，抖动仍可能发生——问题常出在父容器或全局上下文。
- 父容器用了
display: inline-block或float：就算卡片自己position: relative，父级浮动仍会让整个行框重排。改用display: flex或display: grid容器 - 误加了
contain: layout：这个属性会主动封锁图层提升，让transform和box-shadow都退回到主渲染线程。全局搜索并删掉它 - 没验证图层是否独立：打开 Chrome DevTools → Rendering → 勾选 “Layers Borders”，悬停时看卡片是否出现绿色边框。没有？说明合成失败，
will-change: transform或backface-visibility: hidden得补上（但仅限 hover 状态动态加，别写死）
真正卡点不在怎么写 box-shadow，而在于每次改完样式后，你有没有真的去 Layers 面板确认那张绿色边框出现了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
