currentColor 是 CSS 关键字，代表当前元素的 color 计算值，可自动继承文本颜色并用于 fill、border-color 等属性，适用于内联 SVG 和字体图标，现代浏览器及 IE9+ 均支持。
直接使用
就能让图标颜色自动跟随文字颜色变化，无需额外写 JS 或重复定义颜色值。
什么是 currentColor？
是一个 CSS 关键字，代表当前元素的
计算值。它像一个“颜色变量”，会自动继承父级或自身设置的文本颜色，并可用于任何接受颜色值的属性（如
、
、
等）。
SVG 图标中用 fill: currentColor
当 SVG 以内联方式嵌入 HTML（即写在 HTML 中，不是通过
引入），可直接对
或其子元素（如
、
）设置
：
此时 SVG 图标会和“点击编辑”文字一样是蓝色；若把
，图标立刻变红。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
字体图标（如 Font Awesome）也适用
如果使用
这类字体图标，本质是文字，只需确保其
被正确设置，图标自然随文字变色。不需要额外设置
—— 因为字体图标渲染靠的是
属性本身。
避免写死
在图标上，让它继承父级 color
需要统一控制时，可在父容器设
，所有子图标自动响应
配合
伪元素
（如
）插入字体图标时，同样用
或直接依赖继承链
兼容性与注意事项
支持所有现代
浏览器
（Chrome 19+、Firefox 19+、Safari 6+、Edge 全支持），IE9+ 也支持，基本可放心使用。
仅对内联 SVG 生效；
不会继承，因为 SVG 是独立文档上下文
若 SVG 中已有
写死（如
），会覆盖
，需移除或改为
用
设置边框、阴影、背景时同样有效，比如
currentColorcurrentColorcolorfillborder-colorbackground-colorfill: currentColor
点击编辑
style="color: red"colorfillcolorcolor: #333color::beforecolor: inheritcurrentColorfillfill="#000"currentColorfill="currentColor"currentColorborder: 1px solid currentColor