:focus配合transition可实现平滑聚焦过渡，关键用border-color和box-shadow双过渡、重置outline、避免不支持属性，移动端需js配合preventscroll与scrollintoview优化。
直接用 :focus 配合 transition 就能实现平滑聚焦过渡，不需要 JS 或 @keyframes —— 但必须避开 outline 的硬切跳变和默认焦点样式干扰。
为什么:focus + transition 有时没反应
常见错误是只改了边框颜色却忘了重置 outline，或者用了不支持过渡的属性（比如 outline 本身在多数浏览器里不能平滑过渡）。box-shadow 和 border-color 是最稳妥的选择。
- 没写
outline: none→ 浏览器叠加默认蓝色外框，和你的样式打架 - 写了
outline: 0但没加outline-offset→ 看似去除了，实际可能残留像素级偏移 - 对
outline做 transition → 大部分浏览器不支持，动画卡顿或直接失效 - 用了
transform: scale()但没设transform-origin→ 缩放中心偏移，视觉错乱
推荐写法：border-color + box-shadow 双过渡
这两个属性渲染性能好、兼容性高（IE10+）、过渡自然。重点在于统一初始态与聚焦态的可动画属性，并控制时长和缓动。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 初始态设
border-color: #d1d5db，聚焦态改为#3b82f6，配合transition: border-color 0.2s ease-in-out - 加一层柔和
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2)，聚焦时扩大到0 0 0 4px rgba(59, 130, 246, 0.4) - 务必加
outline: none，否则 Safari/Chrome 会额外画一圈难看的默认轮廓 - 如果输入框有圆角，
border-radius不需要过渡 —— 它本身是静态值，过渡反而导致渲染抖动
input[type="text"] {
border: 2px solid #d1d5db;
border-radius: 6px;
outline: none;
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
input[type="text"]:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4);
}
移动端软键盘弹出时的视觉错位
iOS 和部分 Android 机型在 focus() 触发后会自动滚动页面，把输入框顶到视口顶部，遮住 label 或按钮。这不是 CSS 能解决的，得靠 JS 配合 focus({ preventScroll: true }) 控制。
-
autofocus属性完全不支持preventScroll，所以动态聚焦必须用 JS - 即使加了
preventScroll: true，Safari 仍可能因 viewport 缩放或position: fixed父容器而失效 - 更稳的做法是：聚焦后手动调用
element.scrollIntoView({ block: 'nearest', inline: 'start' })，再微调window.scrollBy(0, -100)预留键盘空间
真正容易被忽略的是：过渡效果必须和用户操作节奏匹配。0.4s 的动画在桌面端显得拖沓，0.1s 在移动端又太急——实测 0.2s 是多数场景下的平衡点；另外，别给所有输入框都加光晕，表单字段密集时会引发视觉噪音。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
