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 写在父容器上，而边框样式只作用于 或 ，动画就断了。

常见错误：给

加 transition，却在子 上写 border-color —— 属性和过渡不在同一节点，浏览器无法关联。

• 对图片加边框动画，transition 和 border 都得写在 标签的选择器里
• 表格单元格要过渡，transition 必须写在 th, td 上，不是 table
• Safari 下偶尔卡顿？加个 transform: translateZ(0); 强制硬件加速，不增加视觉负担

想让边框“从无到有”怎么写

如果目标是默认没边框、悬停才出现，单靠 border-color 不行——透明边框仍是边框，视觉上还是占位的。这时候该用 border-width 过渡。

性能影响极小，单图几乎无感；但要注意：宽度变化会触发重排，所以得控制好初始值。

DeepBI DHTML 页面生成器

生成可在 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)。

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