边框闪烁主因是transition未覆盖border所有子属性或box-model突变；须同时过渡border-width、border-style、border-color，禁用none而用transparent+0宽度，并配合box-sizing: border-box或box-shadow避免重排。
边框粗细变化时闪烁明显，通常是因为浏览器在重绘边框时缺乏过渡动画支持，或 transition 属性未正确作用于 border-width。单纯写 transition: border-width 0.3s 往往无效——因为 border 是复合属性，且当边框颜色、样式（如 solid）或宽度同时变化时，需明确指定所有参与变化的子属性，否则浏览器可能跳过过渡或触发重排闪烁。
确保 border 的三个子属性都参与过渡
border 由 width、style、color 构成。哪怕只改宽度，也建议显式声明三者，避免浏览器因 style 或 color 未定义而中断过渡：
- ✅ 正确写法：
transition: border-width 0.3s ease, border-style 0.3s ease, border-color 0.3s ease; - ❌ 问题写法：
transition: border-width 0.3s;（缺少 style 和 color，部分浏览器会忽略过渡） - ⚠️ 注意：border-style 不能设为
none→solid的过渡，因为none不参与渲染，会导致“闪一下再出现”；应始终维持solid（或其他有效样式），仅变 width 和 color
用 transparent 替代 none 控制视觉“隐藏”
想实现“边框收缩至消失”的效果，不要用 border: 0 或 border-style: none，而应保持 border-style: solid，通过 border-color: transparent + border-width: 0 组合实现平滑收起：
- 初始态：
border: 2px solid #333; - 收缩态：
border: 0 solid transparent;（注意：这里0 solid transparent是合法写法，等价于border-width: 0; border-style: solid; border-color: transparent;） - 这样 transition 才能全程作用于 width 和 color，不会中断或闪烁
避免盒模型突变引发重排闪烁
border-width 变化会改变元素尺寸（影响 width/height），若父容器或相邻元素对布局敏感，可能触发重排并伴随视觉抖动：
立即学习“前端免费学习笔记（深入）”；
- 给元素添加
box-sizing: border-box;，让 border 包含在设定宽高中，减少尺寸跳变 - 如需严格保持布局稳定，可用
outline替代 border 做装饰性边框（outline 不占布局空间），但注意 outline 不支持圆角和单独控制四边 - 更稳妥方案：用
box-shadow模拟边框（如box-shadow: 0 0 0 2px #333;），它不参与盒模型，transition 更稳定
补全 vendor 前缀与兼容写法（可选）
虽然现代浏览器基本无需前缀，但若需支持较老版本 Chrome/Safari，可加：
-webkit-transition: border-width 0.3s ease, border-style 0.3s ease, border-color 0.3s ease;- 同时确保 :hover 或对应状态中 border 的三属性完整声明，例如：
border: 0 solid transparent;而非简写遗漏
基本上就这些。关键不是“加 transition”，而是让变化的每个环节都有迹可循、有值可缓动。边框收缩看似简单，但绕开 none/style 中断、避开 box-model 抖动、用对 transparent 这几个点踩准了，闪烁自然就消失了。
