HTML表格无原生边框深浅渐变属性，需用CSS的box-shadow（模拟立体层次）或伪元素+linear-gradient（实现精确色彩过渡）来实现，border-color不支持渐变色。
直接说结论：HTML 表格本身没有“边框颜色深浅变化”的原生属性，所谓“深浅变化”本质是通过 CSS 的 border-color、border-width、box-shadow 或伪元素模拟实现的视觉渐变效果，不是真正意义上的颜色透明度或明度过渡。
为什么不能直接用 border-color 设置深浅渐变？
border-color 只接受单色值（如 #333、rgb(51, 51, 51)、darkgray），不支持 CSS 渐变色（linear-gradient）——浏览器会直接忽略。试图写成 border: 2px solid linear-gradient(to right, #000, #333); 是无效的。
常见错误现象：边框完全消失、回退为默认黑色、控制台报错但不提示（静默失败）。
- 只有
background、background-image和部分新属性（如mask-image）支持渐变 -
border是纯色描边，CSS 规范未定义渐变边框 - 某些旧教程里用
bordercolorlight/bordercolordark属性（IE 专有）已彻底废弃，现代浏览器不识别
用 box-shadow 模拟“深浅边框”的实操方案
这是最轻量、兼容性好（支持 IE11+）、且能做出真实“外深内浅”或“上深下浅”层次感的方法。核心思路是叠加多层阴影，每层偏移和模糊半径不同，形成明暗过渡。
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
/* 模拟顶部深色 + 底部浅色的立体边框 */
tr:first-child th,
tr:first-child td {
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
}
tr:last-child th,
tr:last-child td {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}- 第一行加负 Y 偏移阴影 → 视觉上“压暗”上边缘
- 最后一行加正 Y 偏移阴影 → 视觉上“提亮”下边缘（降低 opacity 实现浅感）
- 避免给
table自身加box-shadow，否则会覆盖单元格内边框 - 慎用
inset阴影：它在内部渲染，容易与border混叠，导致颜色发灰、难控制
用伪元素 + clip-path 制作局部深色边框
当需要某一边（比如左侧）呈现从深到浅的垂直过渡时，::before 伪元素 + linear-gradient 是唯一可行路径。
td.left-highlight {
position: relative;
}
td.left-highlight::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(to bottom, #1a1a1a, #666);
clip-path: inset(0 100% 0 0); /* 只显示左侧条 */
}- 必须设
position: relative在单元格上，否则伪元素定位失效 -
clip-path: inset()是关键：它裁剪掉右侧、顶部、底部，只留左侧窄条 - 不能用
border-left替代——因为border不支持渐变 - 性能影响小，但 Safari 对
clip-path的旧版本支持不稳定，建议加-webkit-clip-path
真正要注意的不是“怎么写渐变”，而是先想清楚：你要的“深浅变化”到底是视觉层次（用 box-shadow）、还是精确色彩过渡（用伪元素）、还是只是设计稿里的示意——后者往往只需选两个接近色值手动设置上下/左右边框即可，别硬套渐变。
