border-color hover过渡不生效主因是未声明初始边框（需border-width和border-style）及transition未写在默认状态；正确写法为button{border:2px solid transparent;transition:border-color .25s}，button:hover{border-color:#007bff}。
边框颜色过渡（border-color）本身是可动画属性，但**90% 的失效不是浏览器不支持，而是初始边框没声明或 transition 挂错了地方**。
为什么 border-color hover 过渡不生效
直接写 div:hover { border-color: red; } 却没效果？核心问题就两个：
- 元素没定义
border-width和border-style—— 浏览器只对「已存在的边框」做颜色过渡，border: none或未声明边框样式时，border-color变化被忽略 -
transition写在了父容器或:hover规则里 —— 它必须写在「非 hover 状态的原始元素」上，且和border同级
border-color 过渡的正确写法
以按钮为例，这是稳定可用的最小闭环：
button {
border: 2px solid transparent;
transition: border-color 0.25s ease;
}
button:hover {
border-color: #007bff;
}
关键点：
- 用
transparent而非none做初始色，避免尺寸跳变 -
transition必须写在button原始状态，不能只写在:hover里 - 如果同时要改粗细，别只写
transition: all—— 显式列出border-color 0.25s, border-width 0.25s，防止意外触发重排
Safari 下 border-color 过渡卡顿或跳变
Safari 14–15 在缩放、高 DPI 或 GPU 加速场景下，纯 border-color 过渡可能出现视觉延迟或突变。这不是 bug，是渲染层优化导致的。
加一行兜底即可修复：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
button {
border: 2px solid transparent;
transition: border-color 0.25s ease;
transform: translateZ(0); /* 强制硬件加速 */
}
或者更稳妥地把 transform 也纳入过渡：
transition: border-color 0.25s ease, transform 0.25s ease;
注意：transform: translateZ(0) 不影响布局，无副作用，但能绕过 Safari 的渲染陷阱。
想实现“从无边框到有色边框”的淡入效果
仅靠 border-color 无法真正“从无到有”——transparent 还是有宽度的边框。此时该用 border-width 过渡：
button {
border: 0 solid #007bff;
transition: border-width 0.25s ease;
}
button:hover {
border-width: 2px;
}
这样颜色自动继承，视觉上就是“边框淡入”。不过要注意：border-width 动画会触发重排，单个元素几乎无感，但大量元素同时动画时，border-color 仍是更轻量的选择。
真正卡住人的永远不是语法，而是那行漏掉的 border: 2px solid transparent，或是 Safari 里少写的 transform: translateZ(0)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
