Css3 currentColor 变量使用

一、currentColor定义及理解

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

 

 

介绍currentColor相关知识

⑴来源于SVG，CSS3的变量，可以解决颜色属性无法继承的问题。

⑵不仅可以设置border，还可以设置outline-color，background，box-shadow、text-shadow等

⑶样式便于维护，但是需注意那些地方需要用到这个变量，否则可能导致一变全变。

⑷因为是CSS3提出的，所以IE9以下不支持。

 

二、举例说明说明

1.当前元素有color设定

2.当前元素无color设定，但父元素有设定color值。

3.父元素未设定color值，会寻找祖先元素直到有设定color的元素为止，如果没有，以浏览器默认颜色为准。

<style>
    .btn1{
        color: red;
        line-height: 40px;
        width: 100px;
        text-align: center;
        border:1px solid currentColor;
        box-shadow: 2px 2px 2px currentColor;
    }
</style>
<div class="btn1">
    按钮
</div>

展示效果：

 

 

更多：

Css3 实现任意角扇形|Css3实现六角扇形 

Css3 实现全圆进度条展示功能  

CSS3 圆环旋转效果