CSS 有史以来第一个变量—currentColor

在CSS 颜色（第三版)规范中，增加了很多颜色关键字，比如lightgoldenrodyellow等，不是很常用，但是我们还得到了一个特殊的关键字currentColor，他是从SVG那里借鉴来的。这个关键字并没有绑定到一个固定的颜色值，而是一直被解析为color。实际上，这个特性让它成为***CSS中有史以来的第一个变量。
比如我们想让所有的水平分割线（所有的

---

元素）自动与文本的颜色保持一致。
用currentColor我们可以这样写：

hr {
    height: .5em;
    backgorund: currentColor;
}

上面代码显示的效果是0.5em 高度的背景颜色是当前的标签所继承的文字颜色
currentColor是 color 属性的值，具体意思是指：currentColor关键字的使用值是 color 属性值的计算值。如果currentColor关键字被应用在 color 属性自身，则相当于是color: inherit
。
inherit:
可以用在任何CSS属性中，这从w3cschool文档中就已经体现了，它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）。举例来说，要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需要利用inherit。
我们可以结合CSS3 animation 来实现一个不断改变的背景颜色：
HTML:

Using currentColor for fun and profit
In pure CSS you can use currentColor wherever you migth use a normal color value. This maps to whatever the current value of color is.
Go ahead, stick currentColor 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.

Foobar

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;
}

演示地址