浏览器不支持 transition: border，因 border 是复合属性；仅 border-color 和 border-width 可平滑过渡，且需初始值明确（如 border: 1px solid transparent），配合 transition: border-color 0.3s ease 才生效。
为什么直接写 transition: border 不生效
浏览器不把 border 当作可过渡的原子属性，它是复合值（含 width、style、color），多数引擎会忽略或降级处理。你看到动画“跳变”或干脆没反应，大概率是写了 transition: border 0.3s 这种写法。
真正能被平滑过渡的只有子属性：border-color、border-width，且必须初始值和聚焦值都明确存在——比如不能从 border: none 突然变成 border: 2px solid #007bff，这会触发重排，动画卡顿甚至失效。
- ✅ 正确基础态：
border: 1px solid transparent - ✅ 聚焦态只改颜色：
border-color: #007bff - ✅ 过渡声明写在非伪类规则里：
transition: border-color 0.3s ease
::after 实现底部边框从中展开动画的关键点
要让线条从中间向两边伸展，核心不是靠 width 动画，而是用 transform: scaleX() 配合 transform-origin: center。否则容易偏移、闪烁，或在圆角输入框上露出尖角。
- 父元素必须设
position: relative，否则::after会脱离定位上下文 -
::after初始状态：width: 0; left: 50%; transform: translateX(-50%) scaleX(0) -
input:focus::after只改scaleX(1)，其他值不动 - 动画性能更好：
scaleX属合成属性，走 GPU 加速；width改变会触发重排
:focus-within 控制外层容器高亮的兼容性陷阱
想让整个搜索框容器（比如带图标和 input 的 div）在 input 获焦时高亮，:focus-within 是最简洁方案，但它在旧环境里不可靠。
立即学习“前端免费学习笔记（深入）”；
- Chrome 60+、Firefox 61+、Safari 15.4+ 支持；IE 完全不支持
- 父容器必须有视觉边界（如
border或background），否则高亮不可见 - 如果容器内有
button或图标元素，它们也得可聚焦（不能设tabindex="-1"），否则无法触发 - 移动端 WebView（尤其安卓微信内置浏览器）对
:focus-within支持不稳定，建议加 JS fallback
outline 做高亮时为什么总“打架”
原生 outline 和自定义边框/阴影容易重叠、错位，尤其在 Safari 或 iOS 微信里。它不是布局的一部分，但默认有偏移量，且不支持 border-radius 和 box-shadow。
- 首选清掉原生轮廓：
outline: none（写在基础样式里，别只放:focus中） - 若需外发光效果，用
box-shadow替代：box-shadow: 0 0 6px rgba(0, 123, 255, 0.3) - 真要用
outline，务必配outline-offset微调位置，但注意安卓 WebView 对该属性支持差，慎用
scaleX 动画是否加了 will-change: transform，或者 :focus-within 是否被父级 overflow: hidden 截断——这些地方一漏，效果就断。 
