border-color过渡需先设初始边框，如border:2px solid transparent；transition须写在常态选择器且指定属性；border-width过渡防重排应设initial border:0 solid color；table需对th/td设transition并启用border-collapse:collapse；Safari卡顿可加transform:translateZ(0)优化。
border-color 过渡必须先有初始边框
直接写 img:hover { border-color: red; } 不会动——浏览器只对「已存在的边框」做颜色过渡。如果初始状态是 border: none 或压根没声明 border-style 和 border-width，border-color 变化会被忽略。
实操建议：
- 给元素设明确初始边框：
border: 2px solid transparent; - 在
:hover中只改border-color，例如：border-color: #007bff; -
transition必须写在常态选择器上，且指定属性：transition: border-color 0.3s ease; - 别把
transition放在:hover里，那不会生效
用 border-width 过渡时要防重排抖动
想让边框「从无到有」，比如默认没边框、悬停才出现 3px 边框，仅靠 border-color 不够——它始终存在，只是透明。这时得过渡 border-width，但宽度变化会触发浏览器重排（reflow），导致布局跳动。
实操建议：
- 初始设
border: 0 solid #007bff;（宽度为 0，但样式和颜色已声明） - hover 时设
border-width: 3px;，颜色自动继承 - 同时过渡两个属性更稳妥：
transition: border-width 0.25s ease, border-color 0.25s ease; - 若容器用了
box-sizing: border-box，宽度变化不会撑大元素；否则务必确认 padding/margin 没被意外影响
table 表格边框过渡必须作用于 th/td
给 table 元素加 transition 没用。表格内部边框实际由 th 和 td 渲染，且必须启用 border-collapse: collapse 才能形成连续边框线，否则分离模式下过渡行为不可预测。
实操建议：
- 显式设置
table { border-collapse: collapse; } -
transition写在th, td上，不是table：th, td { transition: border-color 0.2s ease; } - 初始边框统一用
border: 1px solid #e0e0e0;或border: 2px solid transparent; - 避免在媒体查询中覆盖了
th, td的transition声明，小屏下容易失效
Safari 下 border-color 过渡偶尔卡顿怎么办
Safari 14–15 在某些缩放或 GPU 加速场景下，纯 border-color 过渡可能出现跳变或延迟，这不是 bug，而是渲染层优化导致的视觉断层。
实操建议：
- 给元素加一个无感的硬件加速提示：
transform: translateZ(0); - 或者叠加一个轻量过渡属性：
transition: border-color 0.3s ease, transform 0.3s ease; - 不要用
outline替代border来绕开——outline-color在部分 Safari 版本不支持过渡 - 真机调试时发现 hover 不触发？那是触摸设备限制，需额外加
:active或 JS 切换 class
真正卡住人的，往往不是“怎么写动画”，而是初始边框是否真实存在、transition 是否落在正确元素上、以及 Safari 那个看不见摸不着的渲染层。这些点漏掉任意一个，效果就断在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
