在CSS 颜色（第三版)规范中，增加了很多颜色关键字，比如lightgoldenrodyellow等，不是很常用，但是我们还得到了一个特殊的关键字currentColor，他是从SVG那里借鉴来的。这个关键字并没有绑定到一个固定的颜色值，而是一直被解析为color。实际上，这个特性让它成为***CSS中有史以来的第一个变量。
比如我们想让所有的水平分割线（所有的<hr>元素）自动与文本的颜色保持一致。
用currentColor我们可以这样写：
hr {
height: .5em;
backgorund: currentColor;
}
上面代码显示的效果是0.5em 高度的背景颜色是当前的标签所继承的文字颜色
currentColor是 color 属性的值，具体意思是指：currentColor关键字的使用值是 color 属性值的计算值。如果currentColor关键字被应用在 color 属性自身，则相当于是color: inherit
。
inherit:
可以用在任何CSS属性中，这从w3cschool文档中就已经体现了，它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）。举例来说，要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需要利用inherit。
我们可以结合CSS3 animation 来实现一个不断改变的背景颜色：
HTML:
<h1>Using currentColor for fun and profit</h1>
<p>In pure CSS you can use <code>currentColor</code> wherever you migth use a normal color value. This maps to whatever the current value of color is.</p>
<p>Go ahead, stick <code>currentColor</code> in gradients and backgrounds. It’s already the default for text, borders, and drop shadows so you don’t even need to define current color there.</p>
<button>Foobar</button>
CSS:
/*||||||||||||||||||||||||||||||||||
Just change this color. */
html {
color: red;
animation: color 30s linear infinite;
}
@keyframes color {
33.3% { color: #0f0; }
66.7% { color: #00f; }
}
/*||||||||||||||||||||||||||||||||||*/
body {
font-family: sans-serif;
margin: 2em;
border-top: 2px solid;
position: relative;
padding: 1em;
}
body:before {
content: "";
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .1;
background-color: currentColor;
background-image: linear-gradient(to bottom, currentColor, #fff);
}
p, h1 {
color: black;
margin-top: 0;
}
button {
color: inherit;
display: block;
text-decoration: none;
padding: .5em 1em;
background: white;
border: 2px solid;
margin: 0 auto;
border-radius: .5em;
box-shadow: 2px 2px;
font-weight: bold;
}
