border过渡需显式声明初始边框（如border:2px solid transparent）且transition写在常态选择器上；否则border-color无效；“从无到有”应改用border-width或box-shadow过渡，后者更顺滑且不触发重排。

直接用 border 做过渡效果，90% 的失败都卡在初始边框没声明或 transition 写错了位置——不是 CSS 不行，是写法没对上浏览器的渲染逻辑。

为什么 border-color 过渡不生效

常见错误现象：img:hover { border-color: red; } 但鼠标移入后边框瞬间变色、无渐变；或者压根没反应。

• 根本原因：border-color 只对「已存在的边框」起作用。如果元素初始是 border: none 或没设 border-style 和 border-width，浏览器会忽略颜色变化
• 必须显式声明初始边框，例如：border: 2px solid transparent; —— 宽度和样式固定，颜色为透明，这样 hover 时改 border-color 才能触发过渡
• transition 必须写在常态选择器上（比如 img），不能只写在 :hover 里；否则动画不会启动

如何让边框“从无到有”淡入

想实现「默认无边框 → 悬浮出现有色边框」，只靠 border-color 不够直观，因为 transparent 仍是“有边框”。这时该用 border-width 过渡。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 初始设：border: 0 solid #007bff;（宽度为 0，但样式和颜色已预置）
• hover 时改：border-width: 2px;，颜色自动继承
• 同时过渡两个属性更稳妥：transition: border-width 0.25s ease, border-color 0.25s ease;
• 注意：border-width 变化会触发重排（reflow），单图影响小，但表格中大量 td 同时动可能卡顿，此时建议换 box-shadow

用 box-shadow 替代 border 更少踩坑

box-shadow 不参与布局、不触发重排，过渡顺滑，且支持内阴影、模糊、多层，是替代边框动画的首选方案。

• 基础写法：box-shadow: 0 0 0 0 transparent; + transition: box-shadow 0.3s;
• hover 时：box-shadow: 0 0 0 2px #007bff;
• 要内边框效果？加 inset：box-shadow: inset 0 0 0 2px #007bff;
• 别同时给同一元素设 border 和 box-shadow 并都过渡，容易视觉叠加错乱

Safari 下 border 过渡卡顿或跳变

Safari 14–15 在某些缩放或 GPU 渲染场景下，纯 border-color 过渡可能出现延迟、跳帧，这不是 bug，是渲染层优化导致的视觉抖动。

• 最轻量兜底方案：给元素加 transform: translateZ(0);，强制启用硬件加速
• 或把 transform 也加入过渡：transition: border-color 0.3s ease, transform 0.3s ease;
• 不用 !important 强行覆盖，容易干扰后续样式维护

真正难的不是写几行 CSS，而是记住：所有边框过渡的前提是「初始状态必须可动画」——没有 border 就别想 border-color 动起来，transition 不写在常态上就等于没写，Safari 不加 translateZ(0) 就可能白忙活半天。

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