根本原因是currentColor取该元素自身最终计算出的color值，而非父级或默认值；若th/td未显式声明color且继承链断裂，则color回退为黑色，border-color: currentColor即显示黑边，需确保其有明确color计算值。
table 或 th/td 上直接设 color 后，border-color: currentColor 为什么没反应
根本原因：currentColor 取的是**该元素自身最终计算出的 color 值**，不是父级或默认值。如果 th 或 td 没显式声明 color，且继承链上也没传下来（比如 table 没设 color），那它的 color 就是浏览器默认黑色，border-color: currentColor 就真画成黑边——你可能以为“没生效”，其实是它忠实地画了黑。
- 必须确保目标单元格有明确的
color计算值：要么自己写color: #2196f3;，要么从table继承（table { color: #2196f3; }） - 检查开发者工具里该
th/td的Computed面板，确认color确实不是rgb(0, 0, 0) - 别信“
table { color: red; }就够了”——Chrome 对th有内置样式color: -internal-light-dark(black, white)，会覆盖继承，得加权重或单独写th { color: inherit; }
border: 1px solid currentColor 在 IE11 中失效怎么办
IE11 不支持在复合属性 border 里用 currentColor，整条声明会被忽略，边框直接消失。这不是 bug，是规范实现差异。
- 必须拆开写：
border-width: 1px;、border-style: solid;、border-color: currentColor; - 不要省略
border-style—— 它不是可选的，缺了border就不渲染 - 若需兼容旧版 Safari（box-shadow 中
currentColor的支持问题，同理：先写降级色，再覆盖currentColor声明
内联 SVG 图标在表格单元格里 fill: currentColor 不变色
常见错因不是语法错，而是 currentColor 的取值源头断了。SVG 根元素 <svg> 默认不继承 color，哪怕 td 有颜色，<svg> 里 fill="currentColor" 仍回退为黑色。
- 给
<svg>标签加style="color: inherit;"或写 CSS：td svg { color: inherit; } - 确认 SVG 内部没硬编码
fill="#333"属性——它会盖掉fill="currentColor" - 伪元素（如
td::before）默认也不继承color，若在里面用color: currentColor，得先写color: inherit;
暗色模式下 currentColor 没自动切换颜色
currentColor 不感知系统偏好，它只读取当前元素此刻的 color 计算值。如果你只写了 td { color: black; }，那在暗色模式下文字就看不见了，边框也跟着是黑的。
立即学习“前端免费学习笔记（深入）”；
- 必须配合媒体查询主动重设：
@media (prefers-color-scheme: dark) { td { color: #e2e8f0; } } - 别依赖
CanvasText这类系统关键词——它虽能适配，但无法控制具体亮度，且部分旧浏览器不支持 - 想让边框比文字略浅？纯
currentColor不行，得用color-mix(in srgb, currentColor 70%, white 30%)（现代浏览器）或自定义属性做中间层
最易被忽略的一点：currentColor 不是“取父级 color”，而是取本元素自己的 color 值——哪怕这个值来自 inherit 或 var(--text)，只要它最终算出来，currentColor 就跟着它走。表格里每个单元格都得独立满足这个前提，才能真正同步。
