图片悬浮边框不生效的主因是未声明初始边框；须设如 border: 2px solid transparent，hover 改 color，并将 transition 写在 img 上，safari 下建议加 transform: translatez(0) 兜底。
图片悬浮时 border-color 不生效？检查是否设置了初始边框
直接写 border-color: red; 但没定义 border-width 和 border-style，CSS 会忽略颜色变化。浏览器只对「已存在的边框」做过渡，空边框（border: none）无法触发 transition。
实操建议：
- 给
<img>元素设置明确的初始边框，例如：border: 2px solid transparent; - 再在
:hover中改border-color，比如border-color: #007bff; - 过渡必须加在非 hover 状态上，如：
transition: border-color 0.3s ease;
transition 写在 img 还是父容器？优先作用于 img 自身
如果把 transition 写在包裹 <img> 的 <div> 上，而边框样式只作用于 <code>img，那过渡不会生效——属性和过渡需在同一元素上。
常见错误现象：鼠标移入后边框瞬间变色，无渐变效果。
实操建议：
- 确保
transition、border、:hover都作用于同一个<img>元素 - 避免用
outline替代border，outline不占布局空间，且部分浏览器不支持outline-color过渡 - 若需保持图片尺寸稳定，初始
border设为transparent，而非none
兼容性问题：Safari 对 border-color 过渡偶尔失效？加个兜底 transform
Safari 14–15 在某些 zoom 或 GPU 加速场景下，纯 border-color 过渡可能卡顿或跳变。这不是 bug，而是渲染层优化导致的视觉延迟。
实操建议：
- 给
<img>加一个极小的、无感的transform: translateZ(0);，强制启用硬件加速 - 或者叠加一个不影响外观的过渡属性，如：
transition: border-color 0.3s ease, transform 0.3s ease; - 不用
!important强行覆盖，容易干扰后续维护
想让边框「从无到有」淡入？用 border-width 过渡更可靠
如果目标是「默认无边框 → 悬浮出现有色边框」，只靠 border-color 无法实现（透明边框变色仍是边框），此时应过渡 border-width。
性能影响：border-width 是可动画属性，但频繁重排不如 border-color 轻量；不过对单张图几乎无感。
实操建议：
- 初始设
border: 0 solid #007bff;（宽度为 0，但样式和颜色已声明） - hover 时改为
border-width: 3px;，颜色自动继承 - 同时过渡两个属性：
transition: border-width 0.25s ease, border-color 0.25s ease;
transform: translateZ(0)。这些点漏掉一个，效果就断在半路。
