CSS3之currentColor详细讲解

一、介绍

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

}

效果

到这里，这个变量就说完了！

---

如果喜欢，不要吝啬你的爱心“❤”哦！