border-color 单独设置无效是因为缺少 border-width 和 border-style；三者必须齐备才能渲染边框，推荐用 border: 1px solid #e74c3c 一次性声明。

直接设 border-color 没反应？不是浏览器问题，是 CSS 边框三要素缺了两个：宽度和样式。

为什么 border-color 单独写不生效

浏览器看到 border-color: red，但默认 border-style 是 none、border-width 是 0，等于命令它“画一条看不见的红线”。必须三者齐备才能渲染边框。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• border: 1px solid #e74c3c 是最稳妥的写法，一次配齐
• 拆开写也行：border-width: 1px; border-style: solid; border-color: #e74c3c
• 只改颜色（比如主题切换）时才用 border-color，但前提是该元素已有 border-style 和 border-width
• bordercolor 属性在 HTML5 中已废弃，Chrome/Firefox/Edge 新版完全忽略它

border-collapse: collapse 必须配着用

不加这句，

默认是 separate 模式，每个 td 自带独立边框，相邻单元格之间留缝隙，你设的红色会断成一截一截，还可能被背景色“填满”成灰线。

• 必须写在 table 选择器上：table { border-collapse: collapse; }
• 写在 td 或 th 上无效
• 启用后，相邻边框自动合并，颜色才真实呈现；否则 border-color 看起来像混色或偏暗
• 如果表格已有复杂内线逻辑，又只想加个外框，改用 outline: 2px solid red 更干净，不参与布局也不被 collapse 合并

给整行 hover 变色，别写 tr:hover

tr 元素默认没有边框，且浏览器对它的边框渲染受 border-collapse 控制，直接写 tr:hover { border-bottom: 1px solid red; } 基本无效。

立即学习“前端免费学习笔记（深入）”；

• 真正起作用的是 td 和 th 的边框，所以得先给它们设初始边框：td, th { border-bottom: 1px solid #ddd; }
• 悬停变色写在 tbody tr:hover td 和 tbody tr:hover th 上，改 border-bottom-color 或 border-top-color
• 过渡动画要加在 td, th 上：transition: border-color 0.2s;
• 移动端不触发 :hover，需额外加 :active 或 JS 降级

只想要最外一圈红边，内部无分隔线

关键不是“加外框”，而是“隔离外框”——table 和 td/th 的边框默认各自渲染，不控制就会互相覆盖。

• table { border: 2px solid red; }
• td, th { border: none; }（别用 0，none 语义更明确）
• 此时 border-collapse 反而有害，不用加
• 如果已有内边框逻辑不能清空，用 outline: 3px solid red; outline-offset: -3px; 绕过边框模型，不影响布局
• 注意：outline 不能设圆角，也不能只设某一边

最容易被忽略的点：border-spacing 默认是 2px，哪怕你把所有边框都设成 transparent，这个间隙仍会被父容器背景填满，看起来像“残留灰线”。真要清干净，得显式写 border-spacing: 0。