前言

在项目中想要更改icon的颜色，看到了currentColor，对于这个没有见过的属性一脸蒙蔽。然后通过百度了解了该属性，本文主要就是简单的介绍下currentColor的使用，以及什么是currentColor。

什么是currentColor

Css3的一个关键字，用于描述当前color的颜色，如果当前元素css未显式指明color，则继承父元素的颜色

您可以使用此值来表示要将color的值用于接受颜色值的其他属性：边框，框阴影，轮廓或背景。来源于此网站的解释CSS-tricks

栗子

button父容器css

    .base-button-container {height: 40px;width: 98px;color: #ffffff;font-size: 16px;border-radius: 4px;}

icon css

        width: 16px;height: 16px;font-size: 16px;fill: currentColor;overflow: hidden;

此时由于icon的css上并未显式描述color，所以currentColor的值为父容器设置的color,这样icon的颜色便可以跟着button颜色主题的变化而变化。

浏览器兼容性

这是一个可以查询css兼容性的网站

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！