• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • currentColor

    版本:CSS3

    currentColor是 color 属性的值,具体意思是指:currentColor关键字的使用值是 color 属性值的计算值。如果currentColor关键字。被应用在 color 属性自身,则相当于是 color: inherit。

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE9以上的浏览器都支持currentColor

    说明:

    在CSS1和CSS2中定义了border-color属性的默认值是color属性的值,但却没有为此定义一个相应的关键字。这个问题在SVG中被意识到了,于是在SVG1.0中引入了currentColor关键字。在CSS3中扩展了颜色值包含currentColor关键字,并用于所有接受颜色的属性上。

    currentColor是color属性的值,具体意思是指:currentColor关键字的使用值是color属性值的计算值。


    • 如果currentColor关键字被应用在color属性自身,则相当于是color:inherit。
    div{border:1px solid;color:red;}
    

    如果你能立马知道上述代码的运行结果,那么就差不多理解currentColor关键字的意思了。上述代码将会让div拥有一个红色的边框,这就解释了border-color属性的默认值是color属性的值;如果将上述代码中的color属性定义删除,那么边框的颜色将取决于父元素的color计算值,因为color拥有继承性;

    实例

    currentColor是css3中扩展的关键字,具体意思就是使用该关键字的元素的(或其最近父元素)color属性的颜色值。如果currentColor关键字被应用在 color 属性自身,则相当于是 color: inherit。

    < body style="color:green">
    	<div class="borderDiv">该div有边框</div>
    </body>
    
    . borderDiv{border:1px solid currentColor;color:red;}
    

    浏览器上查看该html ,显示如下:

    正如我们想的一样。接下来我们再次对它改造:

    <div class="parentDiv">
    <div class="borderDiv">该div有边框</div>
    </div>
    
    . borderDiv{border:1px solid currentColor;color:red;}
    . parentDiv{color:green;}
    

    浏览器上查看该html ,显示如下:

    这个结果和上面的结果一样,看来border 中的currentColor还是遵循最近原则,应用了本身borderDiv class中的color值。通过这个测试,我们也是验证了只有color:currentColor,这个color属性应用currentColor时,等同于color:inherit;

    上篇:transparent

    下篇:text-fill-color