input:focus时border动画不触发，因transition需作用于border-color等子属性而非border复合属性；应设固定边框宽度、用outline实现高亮，并补全-webkit前缀及正确书写顺序。
input:focus 时 border 动画不触发？检查 transition 是否作用在 border 上
transition 不会自动作用于所有 CSS 属性，border 是复合属性，直接写 transition: border 0.3s 在多数浏览器里无效或行为不一致。真正起效的是对单个子属性做过渡，比如 border-color 或 border-width。
- ✅ 正确写法：
transition: border-color 0.3s ease;（推荐）或transition: border-width 0.2s, border-color 0.2s; - ❌ 错误写法：
transition: border 0.3s;（不可靠，Safari 和旧版 Chrome 可能跳过动画） - ⚠️ 注意：如果初始
border是none，改到1px solid #007bff时，border-width从 0→1px 会触发重排（reflow），动画可能卡顿；建议始终保留border: 1px solid transparent作为基础态
边框颜色渐变更自然？用 border-color + outline 配合避免重绘
纯靠 border-color 过渡虽然可行，但聚焦时若同时改变宽度和颜色，容易因 layout shift 导致轻微抖动。更稳妥的做法是固定边框宽度，只变色，并用 outline 做外发光式高亮——它不参与文档流，不影响布局。
- 基础样式设为：
border: 1px solid #ccc;，outline: none; - 聚焦时：
border-color: #007bff;+outline: 2px solid rgba(0, 123, 255, 0.2); - ⚠️ 注意：
outline默认有浏览器内置偏移（outline-offset），如需紧贴边框，加outline-offset: -2px;；但部分安卓 WebView 对outline-offset支持差，生产环境慎用
transition 在 Safari 中失效？补全 -webkit- 前缀并检查伪类顺序
Safari 15.4 之前对 :focus 上的 transition 支持较弱，尤其当样式表里 :focus 规则写在普通状态之后、且未加前缀时，动画可能完全不播放。
- 确保
transition写在非伪类基础规则中（即写在input普通状态下，而非只放在input:focus里） - 补全前缀：
-webkit-transition: border-color 0.3s ease;，现代 Safari 已支持无前缀，但内嵌 WebKit（如 iOS 微信内置浏览器）仍可能需要 - 检查 CSS 加载顺序：如果用 JS 动态插入样式，
:focus动画可能因样式未就绪而跳过；建议把过渡逻辑放在初始 CSS 文件中
想让高亮更“呼吸感”？用 cubic-bezier 调整 timing-function
默认 ease 太常规，容易显得生硬。输入框聚焦是用户主动操作，适合稍带反馈感的缓动曲线，比如先慢后快再微收——模拟真实按压回弹。
立即学习“前端免费学习笔记（深入）”；
- 推荐曲线：
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);（类似 Material Design 的标准 focus easing） - 对比效果：比
ease-in-out更轻快，比linear更有节奏；但别用过于夸张的值（如cubic-bezier(0, 1, 1, 0)），会导致视觉眩晕 - ⚠️ 注意：IE10+ 才支持
cubic-bezier()，如需兼容 IE9，只能退回ease或ease-in-out
border 动画看着简单，但跨浏览器一致性、reflow 控制、timing-function 选择，每个点都容易被当成“小细节”忽略。实际项目里，80% 的闪烁/跳动/不触发问题，都出在 border 初始值没设好，或者 transition 没写在基础选择器上。
