图片边框过渡失效，主因是未声明初始边框、transition未写在基础选择器上或Safari缺少硬件加速；必须设border: 2px solid transparent并写transition: border-color 0.3s ease于非hover规则中，Safari需加transform: translateZ(0)兜底。
图片边框过渡失效，八成是因为初始边框没声明、transition写错位置，或者 Safari 下少了硬件加速兜底。
为什么 hover 时 border-color 没有渐变效果
浏览器只对「已存在的边框」做颜色过渡。如果 img 默认是 border: none 或压根没写边框，:hover 里加 border-color: red 就会瞬间跳变——不是 bug，是规范行为。
- 必须显式设置初始边框，例如：
border: 2px solid transparent -
transition必须写在非:hover的基础选择器上，比如img或.img-hover - 不能只写
transition: all 0.3s，要明确指定属性：transition: border-color 0.3s ease - 别用
outline替代，它不支持border-radius，且部分浏览器不支持outline-color过渡
如何让边框从无到有平滑出现
想实现「默认无感 → 悬浮显形」，靠 border-color 不够用，得动 border-width。但注意：宽度变化会触发重排（reflow），可能轻微抖动。
- 初始设：
border: 0 solid #007bff（宽为 0，但样式和颜色已声明） - 悬停改：
border-width: 3px（颜色自动继承） - 过渡写两个属性更稳妥：
transition: border-width 0.25s ease, border-color 0.25s ease - 若对性能敏感，优先用
box-shadow模拟：box-shadow: 0 0 0 0 transparent→box-shadow: 0 0 0 2px #007bff，它不占布局、无重排
Safari 下边框过渡卡顿或失效怎么办
Safari 14–15 在某些缩放或 GPU 上下文中，纯 border-color 过渡容易视觉延迟甚至跳帧。这不是代码写错了，是渲染层优化副作用。
- 最轻量兜底：给
img加transform: translateZ(0)，强制启用硬件加速 - 更兼容写法：把
transform也加入过渡：transition: border-color 0.3s ease, transform 0.3s ease - 别加
!important强行覆盖，后续维护时容易和其它样式冲突 - 检查是否用了
box-sizing: border-box——img默认是content-box，漏设会导致尺寸计算偏差
真正卡住人的从来不是「怎么写」，而是「哪几处必须写对」：初始边框声明、transition 所在元素、Safari 的 translateZ(0) 兜底——三者缺一，动画就断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
