currentColor 关键字用于引用元素的 color 属性值，可使边框、阴影、SVG 图标及伪元素等样式与文字颜色保持一致，减少重复定义，提升维护性。
在 CSS 中，currentColor 是一个非常实用的关键字，它代表当前元素的 color 属性值。使用它可以让你的样式保持一致，尤其是在处理图标、边框、阴影等需要与文字颜色统一的设计时。
currentColor 的基本用法
当你设置某个属性为 currentColor 时，它会自动获取元素 color 属性的值。例如：
.example {
color: blue;
border: 2px solid currentColor; /* 边框颜色也是蓝色 */
fill: currentColor; /* SVG 填充颜色也是蓝色 */
stroke: currentColor; /* SVG 描边颜色也是蓝色 */
}
在这个例子中，边框、填充和描边都会继承 color: blue 的颜色。
在 SVG 图标中的实际应用
很多项目中使用内联 SVG 图标，通过 currentColor 可以让图标跟随文本颜色变化：
立即学习“前端免费学习笔记（深入）”；
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
.icon {
color: green;
}
.icon svg {
width: 24px;
height: 24px;
fill: currentColor; / 图标填充色等于 color /
stroke: currentColor; / 如果有描边也一样 /
}
这样无论把 .icon 的 color 设成什么颜色，图标都会自动匹配，无需额外定义颜色。
用于阴影或伪元素保持一致性
如果你想让文本阴影或 ::before / ::after 伪元素的颜色和文字一致，也可以用 currentColor：
.highlight {
color: red;
text-shadow: 0 1px 2px currentColor;
}
.bullet::before {
content: "• ";
color: currentColor; / 和父元素文字颜色相同 /
}
这种写法减少了重复定义颜色的需要，提升维护性。
基本上就这些。currentColor 的作用就是“引用当前 color 值”，哪里需要跟随文字颜色，哪里就可以用它。不复杂但容易忽略。
