currentColor 是一个动态引用元素 color 属性值的 CSS 关键字，可用于 border、outline、fill 等颜色属性。它能实现文字与边框、图标等颜色自动同步，提升样式维护效率。例如设置 color: #007bff; border: 2px solid currentColor; 可使边框与文字同色；结合 SVG 使用时，将 fill 设为 currentColor 可让图标跟随文本颜色变化。该特性兼容 IE9 以上浏览器，常用于按钮、输入框、主题化组件中，减少重复颜色定义和 CSS 变量依赖。
在CSS中，currentColor 是一个非常实用的属性值，它能自动继承元素的 color 属性值，并将其应用到其他支持颜色的属性上，比如边框（border）、轮廓（outline）、背景（background）等。这在统一字体颜色与边框、图标颜色等设计细节时特别有用。
currentColor 是什么？
currentColor 并不是一个固定的颜色值，而是一个“引用”。它会动态获取当前元素的 color 属性值。如果未显式设置 color，它会继续向上继承父元素的文本颜色，直到根元素。
例如：
color: blue;
border: 2px solid currentColor;
立即学习“前端免费学习笔记（深入）”；
这里的边框颜色将和文字颜色保持一致，都是蓝色。
统一字体与边框颜色
当你希望边框颜色始终跟随文字颜色变化时，使用 currentColor 可以避免重复写颜色值，提升维护效率。
常见场景包括：
- 按钮边框与文字同色
- 输入框聚焦时的 outline 颜色跟随主题色
- 图标（SVG）颜色与文字一致
示例代码：
.btn {
color: #007bff;
border: 2px solid currentColor;
padding: 10px 16px;
}
此时按钮的文字和边框都是 #007bff，更换主题色时只需改 color 即可。
结合 SVG 图标使用
内联 SVG 图标常通过 fill 或 stroke 设置颜色。若设为 currentColor，图标将自动匹配文本颜色。
示例：
.icon {
color: green;
}.icon svg {
fill: currentColor;
}
这样，图标的填充色就会和文字一样是绿色，无需为图标单独定义颜色。
注意事项与兼容性
currentColor 在现代浏览器中支持良好（IE9+），但在极老版本中可能不被识别。使用时建议：
- 确保设置了 color 值，否则 currentColor 可能为黑色或透明
- 可用于 border、outline、box-shadow、text-shadow、fill、stroke 等属性
- 适合用于构建主题化组件系统，减少 CSS 变量依赖
基本上就这些。合理使用 currentColor 能让样式更简洁、更灵活。
