如何在CSS中使用currentColor关键字实现颜色继承-css教程-PHP中文网

currentColor 是当前元素 color 属性的计算值，严格继承自身 color 值（显式或隐式设置），若未设置则沿继承链向上取值直至根元素，默认为 rgb(0, 0, 0)。

如何在css中使用currentcolor关键字实现颜色继承

currentColor 是什么，它到底继承谁的颜色

currentColor 不是固定值，也不是从父元素“随便抄”一个颜色，它严格等于当前元素的 color 计算值（computed value）——也就是说，它继承的是你显式或隐式设置在该元素上的 color 属性值，而不是父元素的字体颜色。

如果元素没写 color，就沿用继承链：从父元素取 color，一直向上直到根元素（:root），最终 fallback 到浏览器默认（通常是 rgb(0, 0, 0)）
currentColor 在 border、fill、stroke、background 等属性中都能用，但不会触发新的继承计算；它只是把已确定的 color 值复用一次
它不能用于 color 自身（比如 color: currentColor 是无效的循环引用）

哪些 CSS 属性支持 currentColor，哪些不支持

支持 currentColor 的常见属性包括：

border-color、outline-color
fill 和 stroke（SVG 元素内直接使用，或通过 CSS 设置）
background-color（但注意：不支持 background 简写中混用，例如 background: linear-gradient(currentColor, #fff) 是合法的，但 background: currentColor url(...) 会失败）
text-shadow、box-shadow 的颜色部分

不支持的典型场景：

filter: drop-shadow() 中的阴影颜色不能写 currentColor（必须是具体颜色值）
渐变色停止点（linear-gradient(to right, currentColor 0%, #fff 100%)）在部分旧版 Safari 中有兼容问题（iOS 13.3 之前）
自定义属性（--main-color: currentColor）不会动态绑定，它只在声明时取一次快照值

实际用法示例：图标与边框自动同步文字色

最典型的用途是让 SVG 图标或装饰性边框“跟着文字颜色走”，避免重复写颜色值：

.icon {
  color: #007bff;
  fill: currentColor; /* SVG 内部路径自动染成蓝色 */
  stroke: currentColor;
}
<p>.card {
color: #333;
border: 1px solid currentColor; /<em> 边框和文字同色 </em>/
}</p><p>/<em> 按钮悬停时整体变色 </em>/
.btn {
color: #28a745;
}
.btn:hover {
color: #dc3545;
/<em> fill / border 等会自动响应 color 变化 </em>/
}</p>

注意：如果给 .icon 加了 color: inherit，而它的父容器又没设 color，那 currentColor 就会退到浏览器默认黑，图标可能意外变黑——这种隐式依赖容易被忽略。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

currentColor 在伪元素和 SVG 中的坑

伪元素（::before/::after）有自己的 color 计算上下文，所以：

.item::before { content: ""; color: inherit; fill: currentColor; } 是安全的（显式继承后，currentColor 才有依据）
但若省略 color: inherit，伪元素默认 color 是 transparent（部分浏览器），导致 currentColor 变成透明，图标消失

SVG 场景下还要注意：