CSS3中currentColor关键字如何使用

甚至也可用于填充svg，下面会有相应示例。

currentColor 与SVG

我们可以使用 currentColor 来检测元素当前使用的颜色，因而不需要定义 color 很多次。
结合 SVG 图标使用时，currentColor 是很有用的，因为图标颜色的改变取决于它们的父元素。通常我们是这么做的：

CSS Code复制内容到剪贴板

1. .button {   

2.   color: black;   

3. }   

4. .button:hover {   

5.   color: red;   

6. }   

7. .button:active {   

8.   color: green;   

9. }   

10.   

11. .button svg {   

12.   fill: black;   

13. }   

14. .button:hover svg {   

15.   fill: red;   

16. }   

17. .button:active svg {   

18.   fill: green;   

19. }  

使用 currentColor 之后：

CSS Code复制内容到剪贴板

1. svg {     

2.   fill: currentColor;   

3. }   

4.   

5. .button {   

6.   color: black;   

7.   border: 1px solid currentColor;   

8. }   

9. .button:hover {   

10.   color: red;   

11. }   

12. .button:active {   

13.   color: green;   

14. }  

另一种方式是用于伪元素：

CSS Code复制内容到剪贴板

1. a {     

2.   color: #000;   

3. }   

4. a:hover {     

5.   color: #333;   

6. }   

7. a:active {     

8.   color: #666;   

9. }   

10.   

11. a:after,     

12. a:hover:after,     

13. a:active:after {     

14.   background: currentColor;   

15.   ...   

16. }  

上述内容就是CSS3中currentColor关键字如何使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。