浏览器不支持 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。否则容易偏移、闪烁，或在圆角输入框上露出尖角。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父元素必须设 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 截断——这些地方一漏，效果就断。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！