能，但需用 border-color 或 border-width 等可动画属性；transition 必须写在默认态而非 :focus 中；推荐 border-color 与 box-shadow 双过渡实现外扩效果，移动端建议用 focusin 事件加 class 替代 :focus。
focus 伪类加 transition 能实现边框动画吗
能，但有前提：必须用 border 的可动画属性（如 border-color、border-width），不能直接动画 border-style 或整个 border 简写。浏览器只对颜色、宽度、圆角等数值型属性做平滑过渡。
input:focus 里写 transition 为什么没效果
常见原因是 transition 写在了 :focus 规则里，而不是初始状态。CSS 过渡必须定义在「默认态」上，浏览器才能感知变化起点。
- ❌ 错误写法：
input:focus { border-color: #007bff; transition: border-color 0.3s; } - ✅ 正确写法：
input { border-color: #ccc; transition: border-color 0.3s; } input:focus { border-color: #007bff; } - 如果初始没设
border-color，它会从initial（通常是medium宽度 +none样式）开始过渡，视觉上就是“突然出现”边框
想让聚焦时边框“向外扩散”或“描边放大”怎么办
纯 CSS 无法用 border 实现真正的“扩散”动画（因为 border-width 增大会挤压内容），但可用 outline + box-shadow 模拟更自然的发光/浮出效果：
input {
border: 2px solid #ddd;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus {
border-color: #007bff;
box-shadow:
0 0 0 3px rgba(0, 123, 255, 0.25);
}
-
box-shadow的第四值（扩张半径）是关键，它不占布局空间，适合做“外扩”感 - 避免用
outline动画，因它不支持transition，且默认有浏览器样式干扰 - 若真要放大边框，改用
transform: scale()包裹容器，而非直接动border
移动端 focus 动画失效或延迟怎么办
iOS Safari 和部分安卓 WebView 对 :focus 触发不敏感，尤其在非 input[type="text"] 元素上。可靠解法是补监听 focusin 事件并加 class：
input.addEventListener('focusin', () => {
this.classList.add('focused');
});
然后用 .focused 替代 :focus 写样式。同时确保元素可聚焦（比如设置了 tabindex 或原生表单控件）。
- 不要依赖
:focus-within做输入框自身动画，它适用于父容器 - 某些安卓键盘会强制重置焦点样式，加
!important也无效，此时 class 方案更可控
border-color + box-shadow 双过渡，既兼容老浏览器，又避开移动端 focus 陷阱。动画参数别设太长，0.2–0.3s 是人眼感知流畅又不拖沓的区间。
