bordercolorlight 和 bordercolordark 是已废弃的 html 4 表格属性，仅 ie 支持，用于通过亮/暗边框色模拟立体感；现代浏览器完全忽略，必须用 css 的 box-shadow 配合 border 实现兼容凹凸效果。
bordercolorlight 和 bordercolordark 是什么
这两个是 HTML <table> 标签的原生属性，不是 CSS，作用是分别控制边框“亮部”和“暗部”的颜色，从而模拟立体感。它们只在 <code>border 值 ≥ 1 时生效，且仅被部分老式浏览器（如 IE）支持，现代 Chrome/Firefox/Edge 已完全忽略它们。
常见错误现象：bordercolorlight="black" bordercolordark="white" 在 Chrome 里毫无反应，表格边框仍是平的单色线；开发者误以为代码写错，反复调试 CSS 边框却找不到原因。
-
bordercolorlight影响表格左/上边框、单元格右/下边框 -
bordercolordark影响表格右/下边框、单元格左/上边框 - 凹陷效果只需把两个值对调：
bordercolorlight="white" bordercolordark="black" - 必须搭配
border="2"或更大值（border="1"不触发立体计算）
为什么现代浏览器不显示凹凸效果
因为 bordercolorlight 和 bordercolordark 属于已废弃的 HTML 4 属性，W3C 从未将其纳入标准，主流渲染引擎（Blink、Gecko、WebKit）早在 2010 年代初期就移除了支持逻辑。UC 浏览器等小众内核可能残留兼容层，但不可依赖。
使用场景：仅适用于维护遗留 IE6–IE9 企业内网系统；新项目强行使用会导致样式彻底失效，且无法通过 DevTools 查看 computed 样式验证。
- 检查方法：打开 Chrome DevTools → Elements 面板 → 点击
<table> → 在 Styles 标签页搜索 <code>bordercolor，若无高亮即未识别 - 兼容性影响：Safari 15+、Firefox 102+、Chrome 110+ 全部无视这两个属性
- 替代方案必须用 CSS 实现，不能靠 HTML 属性“蒙混过关”
用 CSS 实现真正兼容的凹凸外边框
核心思路是用 box-shadow 模拟立体光照，配合 border 控制基础线条，避免依赖过时属性。关键点在于阴影方向与颜色对比要符合人眼对“凸起/凹陷”的直觉判断。
示例（凸起外边框）：
table {
border: 2px solid #ccc;
box-shadow:
0 2px 4px rgba(0,0,0,0.15), /* 下方深影 → 暗部 */
-2px 0 4px rgba(255,255,255,0.8); /* 左侧亮影 → 亮部 */
}
示例（凹陷外边框）：
table {
border: 2px solid #ddd;
box-shadow:
0 -2px 4px rgba(255,255,255,0.9), /* 上方亮影 → 亮部 */
2px 0 4px rgba(0,0,0,0.1); /* 右侧深影 → 暗部 */
}
- 必须设置
border作为基准线，否则阴影缺乏参照，立体感弱 -
box-shadow的 x/y 偏移方向决定“光源位置”，正负值不能颠倒 - rgba 透明度建议控制在 0.05–0.2 之间，过高会像浮层，过低无立体感
- 不要用
inset阴影——它作用于元素内部，无法模拟外边框立体感
容易被忽略的细节：border-collapse 与圆角冲突
如果同时启用 border-collapse: collapse（用于消除双线边框）和 border-radius（圆角），表格外边框的圆角会失效，因为 collapse 模式下边框被强制“拉直”合并。
正确做法是放弃 collapse，改用 separate 模式 + 统一边框 + 调整 cellspacing 或 border-spacing：
table {
border-collapse: separate;
border-spacing: 0;
border: 2px solid #eee;
border-radius: 6px;
overflow: hidden; /* 防止单元格直角溢出 */
}
-
overflow: hidden必须加，否则圆角区域会露出单元格直角 -
border-spacing: 0替代旧式cellspacing="0"，更可控 - 凹凸效果若叠加圆角，
box-shadow的偏移值需微调（例如 y 偏移减半），否则圆角处阴影变形
实际项目中，没人再用 bordercolorlight 写新页面。真正要做出可靠凹凸效果，得从 box-shadow 的像素级偏移和透明度开始调，而不是寄希望于一个连 Chrome 都不认识的 HTML 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
