border-color过渡需显式声明初始边框（如border: 2px solid transparent）并把transition写在常态选择器上，否则无效；表格需设border-collapse: collapse且transition加在th/td上。
border-color 过渡为什么没反应
直接写 border-color: #007bff; 但没设初始边框，浏览器根本不会动——CSS 只对「已存在的边框」做过渡。空边框（border: none）或只声明颜色不声明宽度/样式的写法，等于告诉浏览器“这里没边框”，过渡自然失效。
常见错误现象：鼠标移入后边框瞬间变色，毫无渐变；或者 hover 后干脆没变化。
- 必须显式设置初始边框，例如：
border: 2px solid transparent; -
:hover中只改border-color，比如：border-color: #007bff; -
transition必须写在常态选择器上，且指定属性：transition: border-color 0.3s ease; - 别把
transition写在:hover里，那毫无作用
transition 写在哪才生效
过渡必须和被改变的属性在同一个元素上。把 transition 写在父容器上，而边框样式只作用于 <img alt="HTML边框过渡效果怎么弄？边框变色教学" > 或 <td>，动画就断了。
<p>常见错误：给 <code><div> 加 <code>transition，却在子 <img alt="HTML边框过渡效果怎么弄？边框变色教学" > 上写 border-color —— 属性和过渡不在同一节点，浏览器无法关联。
立即学习“前端免费学习笔记（深入）”；
- 对图片加边框动画，
transition和border都得写在<img alt="HTML边框过渡效果怎么弄？边框变色教学" >标签的选择器里 - 表格单元格要过渡，
transition必须写在th, td上，不是table - Safari 下偶尔卡顿？加个
transform: translateZ(0);强制硬件加速，不增加视觉负担
想让边框“从无到有”怎么写
如果目标是默认没边框、悬停才出现，单靠 border-color 不行——透明边框仍是边框，视觉上还是占位的。这时候该用 border-width 过渡。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
性能影响极小，单图几乎无感；但要注意：宽度变化会触发重排，所以得控制好初始值。
- 初始写：
border: 0 solid #007bff;（宽度为 0，但样式和颜色已声明） - hover 时写：
border-width: 2px;（颜色自动继承） - 同时过渡两个属性更稳妥：
transition: border-width 0.25s ease, border-color 0.25s ease; - 若担心布局抖动，统一用固定宽度 +
transparent颜色切换，视觉效果一样干净
表格边框过渡容易踩的坑
表格不是普通块级元素，border-collapse: collapse 是前提。不设它，th/td 的边框行为不可预测，过渡要么卡住，要么只动一半。
另外，table 元素自身加 transition 没用——真正渲染边框的是单元格，不是表格容器。
- 必须写：
table { border-collapse: collapse; } -
transition只能加在th, td上，例如：th, td { transition: border-color 0.2s ease; } - 初始边框建议用
border: 1px solid transparent;，避免 hover 时因宽度变化导致单元格错位 - 响应式下记得检查媒体查询是否意外覆盖了
th, td的transition声明
transition 位置错配、或者 Safari 下少了个 transform: translateZ(0)。
