• 技术文章 >web前端 >html教程

    第一个CSS变量:currentColor_html/css_WEB-ITnose

    2016-06-24 11:53:04原创768

    一、基本介绍

    CSS变量正慢慢地从最初的草案到浏览器实现。但规范中有个已经存在多年的变量:currentColor。这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它。 引用MDN中的描述:

    The currentColor keyword represents the calculated value of the element's color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default. It can also be used on properties that inherit the calculated value of the element's color property and will be equivalent to the inherit keyword on these elements, if any.

    我们知道如果你不指定border-color的值,它会默认填充color的值:

    		
    没有设置边框颜色
     

    这是一个相当巧妙的技巧:如果你改变了文本的颜色,边框颜色会自动跟着改变。这个技巧同样适用于outline,box-shadow,text-shadow等。

    二、部分实例

    没有设置边框颜色

      

    下面我们来使用currentColor修改上例:

    没有设置边框颜色

    当然,你也可以适用currentColor在所有你所期望的地方,像gradients、SVG、伪元素,例如:使inline svg sprites 显示像icon fonts,像下面这样:

    svg {fill: currentColor;}

    此时每个svg元素将被渲染为父元素的文本颜色,请戳view Demo

    三、Support

    IE9+及现代浏览器皆支持。

    感谢您的阅读,文中不妥之处还望批评指正。

    转载声明:

    本文标题:第一个CSS变量:currentColor

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:Codeforces Round #280 (Div. 2) D_html/css_WEB-ITnose 下一篇:一款纯css3实现的超炫3D表单_html/css_WEB-ITnose
    VIP会员

    相关文章推荐

    • html怎么隐藏td标签• html5怎么隐藏标签• html网页自动跳转属性是什么• html行内块状级元素有哪些• html表格单元格的边框不显示怎么办

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网