在CSS 顏色（第三版)規(guī)范中组砚，增加了很多顏色關(guān)鍵字窄坦，比如lightgoldenrodyellow等拴驮，不是很常用春瞬，但是我們還得到了一個(gè)特殊的關(guān)鍵字currentColor，他是從SVG那里借鑒來的套啤。這個(gè)關(guān)鍵字并沒有綁定到一個(gè)固定的顏色值宽气，而是一直被解析為color。實(shí)際上潜沦，這個(gè)特性讓它成為***CSS中有史以來的第一個(gè)變量萄涯。
比如我們想讓所有的水平分割線（所有的<hr>元素）自動(dòng)與文本的顏色保持一致。
用currentColor我們可以這樣寫：
hr {
height: .5em;
backgorund: currentColor;
}
上面代碼顯示的效果是0.5em 高度的背景顏色是當(dāng)前的標(biāo)簽所繼承的文字顏色
currentColor是 color 屬性的值唆鸡，具體意思是指：currentColor關(guān)鍵字的使用值是 color 屬性值的計(jì)算值涝影。如果currentColor關(guān)鍵字被應(yīng)用在 color 屬性自身，則相當(dāng)于是color: inherit
争占。
inherit:
可以用在任何CSS屬性中燃逻，這從w3cschool文檔中就已經(jīng)體現(xiàn)了，它總是綁定到父元素的計(jì)算值（對(duì)偽元素來說臂痕，則會(huì)取生成該偽元素的宿主元素）伯襟。舉例來說，要把表單元素的字體設(shè)定為與頁面的其他部分相同握童，你并不需要重復(fù)指定字體屬性姆怪，只需要利用inherit。
我們可以結(jié)合CSS3 animation 來實(shí)現(xiàn)一個(gè)不斷改變的背景顏色：
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;
}
