currentColor 指向元素 color 属性的计算值，可动态应用于边框、SVG 填充等支持颜色的属性。例如设置 color: blue 后，border-color、fill 使用 currentColor 会同步为蓝色；更改 color 时，相关样式自动更新。实际用于图标颜色同步、边框与文本同色、伪元素装饰等场景。结合 CSS 自定义属性可实现主题切换：定义 --theme-color 变量并赋值给 color，所有使用 currentColor 的属性随之响应变化。需注意 currentColor 仅读取 color 属性，不支持其他颜色变量，且在旧版 IE 中存在兼容性问题，调试时建议添加注释说明来源。
在 CSS 中，currentColor 是一个非常实用的关键词，它能自动继承元素当前的 color 属性值，并将其应用到其他支持颜色值的属性上。这个特性让样式更具一致性与动态适应性，特别适合构建可主题化的 UI 组件。
currentColor 是什么？
currentColor 并不是一个固定的颜色值，而是指向元素 color 属性的当前计算值。如果未显式设置 color，它会继承父元素的文本颜色。一旦定义了 color，所有使用 currentColor 的属性都会动态跟随这一变化。
例如：
.icon {
color: blue;
border: 2px solid currentColor;
fill: currentColor;
stroke: currentColor;
}
此时边框、SVG 填充和描边都会是蓝色。若将 color 改为红色，这些属性也会自动变红，无需额外修改。
立即学习“前端免费学习笔记（深入）”；
实际应用场景
利用 currentColor 可以简化许多常见样式的维护工作：
-
图标颜色同步：SVG 图标常通过
fill或stroke设置颜色，使用 currentColor 可使其与文字颜色一致。 -
边框与文本同色：按钮或标签的边框通常希望和文字颜色相同，直接用
border-color: currentColor即可。 - 伪元素装饰：::before、::after 中的背景、阴影等也可使用当前颜色保持视觉统一。
示例：让 SVG 图标跟随文本颜色
.button {
color: #0066cc;
border: 1px solid currentColor;
}
.button svg {
fill: currentColor;
}
无论按钮的 color 如何变化，边框和图标都自动匹配。
结合 CSS 自定义属性实现主题切换
搭配自定义属性（CSS 变量），可以更灵活地控制整体配色方案：
:root {
--theme-color: #007bff;
}
.theme-text {
color: var(--theme-color);
border-bottom: 2px solid currentColor;
box-shadow: 0 2px 0 currentColor;
}
当通过 JavaScript 或类名更改 --theme-color 时，所有依赖 currentColor 的装饰效果也会随之更新。
注意事项
虽然 currentColor 很强大，但需注意以下几点：
- 它只读取 color 属性，不响应其他颜色变量或属性。
- 在老版本 IE 中支持有限（IE8+ 支持，但部分场景有 bug）。
- 调试时可能不易察觉颜色来源，建议在复杂项目中配合注释说明。
基本上就这些。合理使用 currentColor 能减少重复代码，提升样式可维护性，是现代 CSS 开发中值得掌握的小技巧。
