hover边框变色无动画需显式声明transition子属性，如border-color；描边“出现”应初始设transparent边框；outline不占布局但无圆角；性能敏感场景优先用box-shadow模拟。
hover时边框变色但没动画？检查transition是否作用于border属性
直接写 border: 2px solid #000; + hover { border-color: #f00; } 不会触发动画，因为 border 是复合属性，浏览器可能无法精确追踪变化。必须显式声明要过渡的子属性：
-
transition: border-color 0.3s ease;—— 只过渡颜色，最常用也最稳妥 -
transition: border-width 0.2s linear;—— 用于描边粗细变化（比如从0到2px） - 避免写
transition: border 0.3s;，兼容性差，Safari 和旧版 Chrome 可能不生效
描边“出现”动画：从无到有要处理border-style
如果想实现「悬停时描边淡入」，不能只设 border-width: 0 → 2px，因为 border-style: none 到 solid 的切换不会被 transition 捕获。正确做法是：
- 初始状态设
border: 2px solid transparent;（宽度和样式已存在，只是颜色透明） -
hover时改border-color: #3b82f6; - 再配
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);实现缓动效果
用outline替代border？注意它不占布局且无法圆角
如果只是想加一圈高亮外框、又不想影响元素尺寸或重排，outline 确实更轻量：
-
outline: 2px solid #10b981;+transition: outline-color 0.25s;可行 - 但
outline不支持border-radius，圆角容器上会露出尖角 - 它永远在元素最外层绘制，无法实现内描边（
box-shadowinset 更合适）
性能敏感场景：优先用box-shadow模拟描边动画
频繁悬停或列表项多时，border 触发 layout，box-shadow 只触发 paint，更流畅：
立即学习“前端免费学习笔记（深入）”；
- 初始：
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); -
hover：box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); transition: box-shadow 0.3s ease;- 注意：阴影描边无法设置虚线，也不如真实边框精准控制像素级宽度
真正难的不是写出来，而是判断该用 border、outline 还是 box-shadow——得看它是否参与布局、要不要圆角、有没有虚线需求，以及页面里有多少个同时动。
