currentColor 是 CSS 中动态引用元素 color 属性值的关键词，可使边框、背景、SVG 图标等样式与文字颜色一致。例如设置 color: #007BFF 后，border 和 fill 使用 currentColor 即同步为该颜色；在自定义复选框中，通过 color 控制边框和背景色，实现一键换肤；SVG 图标结合 currentColor 可随文本颜色变化；配合 CSS 变量如 --theme-color，切换主题时所有依赖 currentColor 的样式自动更新，提升维护性和一致性。
在 CSS 中，currentColor 是一个非常实用的关键词，它能自动引用元素当前的 color 属性值，用于统一控件的颜色表现。通过它，你可以让边框、图标、背景等样式与文字颜色保持一致，无需重复定义颜色值，提升维护性和主题一致性。
什么是 currentColor？
currentColor 并不是一个具体的颜色值，而是一个动态引用，等于元素的 color 属性值。如果未显式设置 color，它会继承父元素的文本颜色。
例如：
.icon {
color: #007BFF;
border: 2px solid currentColor;
fill: currentColor; /* SVG 图标常用 */
}这个图标的边框和填充色都会是 #007BFF，且当你改变 color 时，其他使用 currentColor 的属性也会自动更新。
立即学习“前端免费学习笔记（深入）”；
在表单控件中统一颜色
很多表单控件（如 input、checkbox、radio）默认样式不完全受 color 控制，但结合自定义样式后，currentColor 可以帮助统一视觉风格。
示例：自定义复选框颜色
.custom-checkbox {
color: #e74c3c;
border: 2px solid currentColor;
}
<p>.custom-checkbox:checked {
background-color: currentColor;
color: white;
border-color: currentColor;
}这里边框和背景都使用了 currentColor，只需修改 color 值就能切换整套配色。
配合 SVG 图标使用
SVG 图标常以内联方式嵌入 HTML，其 fill 或 stroke 可设为 currentColor，从而跟随文本颜色。
示例：
.icon {
color: #27ae60;
width: 24px;
height: 24px;
}
<p>.icon svg {
fill: currentColor;
}这样，图标颜色会随 color 变化，适用于按钮、导航、提示等需要多处复用图标的场景。
主题切换中的优势
使用 currentColor 配合 CSS 自定义属性（变量），可以轻松实现主题切换。
:root {
--theme-color: #3498db;
}
<p>.theme-button {
color: var(--theme-color);
border: 1px solid currentColor;
box-shadow: 0 0 5px currentColor;
}当通过 JavaScript 或类名切换 --theme-color 时，所有依赖 currentColor 的样式都会同步更新。
基本上就这些。合理使用 currentColor 能减少冗余代码，让颜色管理更集中，特别适合组件化开发和设计系统。
