需设置初始边框（如border: 1px solid transparent）并声明transition: border-color，因none→solid不触发过渡；透明边框占位可实现颜色渐变浮现效果。
button:hover 时 border-color 不触发 transition 怎么办
直接写 transition: border-color 0.3s 通常没效果，因为多数按钮默认边框是 border: none 或 border: 0 —— 没有初始边框，border-color 就无法从“无”过渡到“有”。浏览器不认为 none → solid 是颜色变化，而是边框样式重置。
- 必须先给按钮设一个带颜色的初始边框，哪怕很细、很淡，比如
border: 1px solid transparent - 透明边框占位，保证
border-color始终可变，过渡才能生效 - 别用
border: 0或border: none，它们会清空边框所有属性，打断过渡链
正确写法：用 transparent 占位 + 显式声明 border-style
只设 border-color 不够，CSS 过渡需要 border-width 和 border-style 也保持一致（或至少存在），否则浏览器可能跳过渲染。最稳妥的是初始化完整边框：
button {
border: 2px solid #ccc; /* 非 transparent 也可，但要和 hover 颜色同宽同样式 */
transition: border-color 0.25s ease;
}
<p>button:hover {
border-color: #007bff;
}如果想初始“看不见”，就用：border: 2px solid transparent，再配 transition: border-color 0.3s —— 这样悬停时颜色从透明渐变到目标色，视觉上就是边框“浮现”并着色。
为什么 background-color 过渡正常，border-color 却容易失败
因为 background-color 默认是 transparent（可动画值），而 border 默认是 none（非动画值）。两者在 CSS 动画模型中属于不同类别：
立即学习“前端免费学习笔记（深入）”；
-
transparent是合法颜色值，能参与color类过渡 -
none是边框“不存在”状态，不是颜色，不能插值 - 只要边框
width > 0且style不为none，color就可过渡
移动端点击闪动或过渡失效的兼容性注意点
iOS Safari 和部分安卓 WebView 对 border-color 过渡支持较弱，尤其在快速连续悬停/点击时。解决方案：
- 加
-webkit-transition: border-color 0.25s ease（iOS 必须） - 避免同时改
border-width或border-style，只动color - 真机测试时用
:active补充反馈：button:active { border-color: #0056b3; } - 如果仍卡顿，换用
outline+outline-offset模拟（但语义和可访问性略差）
实际效果是否平滑，取决于初始边框是否存在、是否被 reset、以及是否漏写了前缀。很多人调半天发现只是少了一行 border: 1px solid transparent。
