transition 对 border 不起作用是因为 border 是复合属性，浏览器无法插值；正确做法是明确指定 border-color、border-width 等子属性，或改用 box-shadow、transform 等高性能属性，并确保元素可聚焦且焦点样式合理。

transition 为什么对 border 不起作用

直接写 transition: border 0.3s 大概率失效，因为 border 是复合属性（含 width / style / color），浏览器无法自动插值。Safari 和旧版 Chrome 尤其容易跳过动画。

✅ 正确做法是明确指定子属性：

• transition: border-color 0.3s ease（最常用，兼容性好）
• transition: border-width 0.2s, border-color 0.2s（需同时变宽+变色时）
• transition: box-shadow 0.3s ease, transform 0.2s ease（更推荐，性能更好）

⚠️ 如果初始 border: none，再设为 1px solid #007bff，会触发重排（reflow），动画卡顿。建议始终用 border: 1px solid transparent 作基础态。

:focus 伪类不触发的常见原因

不是 CSS 写错了，而是元素根本不可聚焦：

• <input>、<textarea></textarea> 默认可聚焦；<div> 或自定义组件必须加 <code>tabindex="0"
• 某些重置样式（如 Normalize.css）默认清除了 outline，但没补替代样式，导致:focus 看不出变化
• Safari 对 type="number" 或 contenteditable 的:focus 支持更严格，点击后快速移开鼠标可能中断动画

实操建议：先确认元素能被 Tab 键选中；再检查开发者工具里:focus 规则是否被覆盖；最后确保 transition 声明写在非伪类的基础规则中（即写在 input { ... } 里，而不是只放在 input:focus 里）。


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

box-shadow 比 outline 更稳妥的发光效果

用 outline 做高亮容易受 outline-offset 兼容性影响（尤其安卓 WebView），且默认偏移不易控制。改用 box-shadow 更可靠：

• 基础态：box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
• 聚焦态：box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
• 搭配 transition: box-shadow 0.3s ease，柔和扩散不突兀

注意：rgba 透明度别设太高（0.2–0.3 较安全），避免光晕过重；扩散宽度 3px 是平衡视觉与空间占用的常见值。

放大动画要用 transform 而不是 width/height

想让输入框轻微“呼吸”放大？千万别改 width 或 height —— 这会强制重排，卡顿明显。

• 正确写法：transform: scale(1.03) + transform-origin: center center
• 必须配 transition: transform 0.25s ease-out，时长控制在 0.2–0.4s 之间
• 放大比例建议 1.02–1.05，超过 1.08 容易遮挡相邻元素或触发横向滚动

真正容易被忽略的是：移除 outline 后，必须提供足够对比度的替代焦点指示（比如深色边框+发光阴影），否则键盘用户完全无法识别当前焦点位置。