icon镂空上色 & currentcolor关键字

Posted 2021-11-28 65seeker

当我们需要给页面加icon的时候，肯定会遇到给icon设置颜色的需求，很多人可能会选择抠出icon，对icon设置颜色，然后将icon周边透明。

如果我们逆转思路，将icon形状区域透明，通过改变icon的背景颜色达到改变icon颜色的效果，四周设置为纯色，这两种思路实现的效果是一致的。

第二种镂空icon，使用background-color的方式在某些情况下更方便我们管理icon颜色。

不过这种方法有利也有弊，很显而易见的局限性就在于icon的周边必须是纯色导致了icon所处的背景颜色不能频繁变动，另外icon的颜色只能是纯色或者渐变色。

 

谈到设置icon颜色，那就顺便提一下CSS3新加入的关键字：currentColor（color首字母大小写都有效）。

MDN的对currentColor的定义：

currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。

把定义转换成人话的意思就是，如果父元素有设置color属性，它的子元素的color会继承父元素，当父元素或者子元素的其他属性需要使用color相同的值时，比如 

 

.button {color: #117B6F;} 
.button svg {fill: currentColor;}

 

这样svg就可以使用到currentColor的颜色了，更实用的是，在遇到:focus,:hover,:active这些状态时，我们也不需要写重复的对svg一一设置相应的颜色，只需要给.button在不同状态设置好color,svg即可通过currentColor以不变应万变了