第一个CSS变量:currentColor_html/css_WEB-ITnose
程序员文章站
2022-03-17 08:32:30
...
一、基本介绍
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
上一篇: 分享input文字垂直居中和按钮对齐问题的实例教程
下一篇: 在微信小程序中如何修改文字大小
推荐阅读
-
帝国CMS后台系统设置里面的扩展变量是干什么的?_html/css_WEB-ITnose
-
我的第一个html计算器_html/css_WEB-ITnose
-
我的第一个html计算器_html/css_WEB-ITnose
-
Drupal 7 模块开发 建立模块 第一个页面(hook_menu)_html/css_WEB-ITnose
-
三级下拉菜单 变量_html/css_WEB-ITnose
-
在一个div里面嵌套1个labal和2个div,如何用css实现:labal和第一个div显示在一行,第2个div显示在第2行,并且和第1个div左对齐?_html/css_WEB-ITnose
-
$变量 是web开发里的哪种语言_html/css_WEB-ITnose
-
的第一行的第一个th_html/css_WEB-ITnose">
css如果选择
的第一行的第一个th_html/css_WEB-ITnose
css选择第一个到倒数第二个的元素_html/css_WEB-ITnose
我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面_html/css_WEB-ITnose