一、介绍
①CSS3的变量，继承当前元素color的颜色，如果当前元素的color未设定，则继承祖先元素的color值。
②来源于SVG，CSS3的变量，可以解决颜色属性无法继承的问题。
③不仅可以设置border，还可以设置outline-color，background，box-shadow、text-shadow等。
④样式便于维护，但是需注意那些地方需要用到这个变量，否则可能导致一变全变。
④因为是CSS3提出的，所以IE9以下不支持。
二、用法
①当前元素有color设定
html
<div>currentColor</div>
css
div{
font-size:16px;
color:#a95f44;
border:1px solid currentColor;
text-align:center;
}
效果
②当前元素无color设定，但父元素有设定color值
html
<div><p>currentColor</p></div>
css
div{ //父元素
font-size:16px;
color:#a95f44;
text-align:center;
}
p:nth-of-type(1){ //子元素
width: 200px;
border: 1px solid currentColor;
box-shadow: 5px 5px 5px currentColor;
}
效果：
③父元素未设定color值，会寻找祖先元素直到有设定color的元素为止，如果没有，以浏览器默认颜色为准。
这个和父元素的类似，不做讲解了。
三、demo
①配合svg
.cont{
font-size:16px;
color:#000;
text-align:center;
padding-left:30px;
vertical-align:middle;
}
.cont:hover{
color:royalblue;
}
svg{
fill:currentColor;
}
效果：
是不是感觉节省了代码，而且代码好维护？
②配合背景渐变
.button{
padding:.3em .8em;
border:1px solid #ddd;
border-radius:.2em;
color:#fff;
background:#58a linear-gradient(hsla(0,0%,100%,.2),currentColor);
box-shadow:0 .05em.25emrgba(0,0,0,.5);
text-shadow:0-0.05em.05emrgba(0,0,0,.5);
font-size:125%; /*假设父元素为16px;*/
line-height:1.5;
}
效果
到这里，这个变量就说完了！
如果喜欢，不要吝啬你的爱心“❤”哦！
