在css中如何用currentColor关键字-css教程-PHP中文网

在css中如何用currentColor关键字

P粉602998670

发布： 2025-10-15 21:55:02

原创

930人浏览过

currentColor 关键字用于引用元素的 color 属性值，可使边框、阴影、SVG 图标及伪元素等样式与文字颜色保持一致，减少重复定义，提升维护性。

在css中如何用currentcolor关键字

在 CSS 中，currentColor 是一个非常实用的关键字，它代表当前元素的 color 属性值。使用它可以让你的样式保持一致，尤其是在处理图标、边框、阴影等需要与文字颜色统一的设计时。

currentColor 的基本用法

当你设置某个属性为 currentColor 时，它会自动获取元素 color 属性的值。例如：

.example {
  color: blue;
  border: 2px solid currentColor; /* 边框颜色也是蓝色 */
  fill: currentColor;             /* SVG 填充颜色也是蓝色 */
  stroke: currentColor;           /* SVG 描边颜色也是蓝色 */
}

登录后复制

在这个例子中，边框、填充和描边都会继承 color: blue 的颜色。

在 SVG 图标中的实际应用

很多项目中使用内联 SVG 图标，通过 currentColor 可以让图标跟随文本颜色变化：

立即学习“前端免费学习笔记（深入）”；

一键抠图

在线一键抠图换背景

查看详情

.icon {
  color: green;
}
<p>.icon svg {
width: 24px;
height: 24px;
fill: currentColor;    /<em> 图标填充色等于 color </em>/
stroke: currentColor;  /<em> 如果有描边也一样 </em>/
}</p>

登录后复制

这样无论把 .icon 的 color 设成什么颜色，图标都会自动匹配，无需额外定义颜色。

用于阴影或伪元素保持一致性

如果你想让文本阴影或 ::before / ::after 伪元素的颜色和文字一致，也可以用 currentColor：

.highlight {
  color: red;
  text-shadow: 0 1px 2px currentColor;
}
<p>.bullet::before {
content: "• ";
color: currentColor; /<em> 和父元素文字颜色相同 </em>/
}</p>

登录后复制

这种写法减少了重复定义颜色的需要，提升维护性。

基本上就这些。currentColor 的作用就是“引用当前 color 值”，哪里需要跟随文字颜色，哪里就可以用它。不复杂但容易忽略。

以上就是在css中如何用currentColor关键字的详细内容，更多请关注php中文网其它相关文章！