:focus边框变色失效主因是outline未清除、基础border未定义及选择器权重不足；须设outline:none、声明初始border并写transition于默认状态。
直接改 border-color 并配 transition 就行，但必须先关掉默认 outline，否则蓝边会叠在你设的边框上，看起来像“没生效”。
为什么:focus边框变色总不生效
最常见三个原因：
-
outline没清——浏览器默认加的那圈蓝色轮廓会压在你写的border上面，颜色变化被遮住 - 原始状态没定义
border——比如只写了input { padding: 10px; }，那input:focus { border-color: #007bff; }就无效，因为没基础边框可“变色” - 选择器权重不够——比如全局写了
.form input { border: 1px solid #ddd; }，但input:focus没加类名，就会被覆盖
用border-color + transition实现平滑变色
这是最可控、最常用的方式。关键点是：过渡属性写在非聚焦态，颜色变化写在 :focus 里。
- 基础样式里必须包含
border（哪怕只是border: 1px solid #ccc;），且加上transition: border-color 0.3s ease; -
input:focus中只改border-color和outline: none，不要重复写整个border声明，否则会打断过渡动画 - 如果要加阴影增强反馈，用
box-shadow，别依赖outline，它渲染层级不可控
input {
border: 1px solid #ccc;
padding: 8px 12px;
border-radius: 4px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus {
border-color: #007bff;
box-shadow: 0 0 6px rgba(0, 123, 255, 0.3);
outline: none;
}
outline不是不能用，而是得用对场景
如果你真要用 outline（比如想保留键盘导航的高亮提示），注意两点：
立即学习“前端免费学习笔记（深入）”；
- 必须显式写全
outline: 2px solid #007bff;，只写outline-color不生效 - 加
outline-offset: 2px避免紧贴边框的“毛边感”，视觉更干净 - 无障碍友好做法是：鼠标点击时用
border变色，键盘 Tab 时用:focus-visible+outline，但 IE 和旧 Safari 不支持:focus-visible，需降级处理
真正容易被忽略的是 box-sizing: border-box ——没加它的话，padding 和 border 会让输入框实际宽度超出设定值，圆角和布局都可能错位。这个细节不报错，但上线后常导致 UI 微小却顽固的错位。
