第一个CSS变量：currentColor

一、基本介绍

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的值：

	<style type="text/css">
	.parent{ 
		width: 100px;
		height: 100px; 
		color: red;
		border: 1px solid;
		box-shadow: 5px 5px 5px;
		text-shadow: 3px 3px 3px;
	}
	</style>
	<div class="parent">
		没有设置边框颜色
	</div>　

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

二、部分实例

<style type="text/css">
.parent{ 
	width: 100px;
	height: 100px; 
	color: #333;
}
.son {
	border: 1px solid #333;
	box-shadow: 2px 2px 2px #333;
}
</style>
<div class="parent">
	<div class="son">没有设置边框颜色</div>
</div>

　　

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

<style type="text/css">
.parent{ 
	width: 100px;
	height: 100px; 
	color: #333;
}
.son {
	border: 1px solid currentColor;
	box-shadow: 5px 5px 5px currentColor;
	text-shadow: 3px 3px 3px currentColor;
}
</style>
<div class="parent">
	<div class="son">没有设置边框颜色</div>
</div>

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

svg {fill: currentColor;}

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

三、Support

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

 

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

 

转载声明：

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

转载请注明转自Benjamin-专注前端开发和用户体验