CSS属性比较多，但是有一些很少被技术人员使用，虽然这些属性目前已被浏览器支持，而currentColor就是属性之一，现在我们和石家庄网站建设小编一起了解一下吧!

　　currentColor代表了当前元素被应用上的color颜色值。它允许让继承自属性或子元素属性的color属性为默认值而不再继承。而其关键字按某种规则获取了color属性的值并赋值给了自身。

　　在任何你想要默认继承color属性值的地方都可以使用currentColor这一关键字。也会随着color关键字的属性值的改变，它会自动的通过规则反映在所有currentColor关键字使用的地方。

　　.box {

　　color: red;

　　border: 1px solid currentColor;

　　box-shadow: 0 0 2px 2px currentColor;

　　}

　　在上面的代码片段里，并不是重复相同的color值，而是用currentColor来代替。这使CSS变得好控制，也不再需要在不同的地方来追踪color值简化color定义。像链接，边框，图标以及阴影等都可以通过简化的currentColor来替换一遍又一遍的特定color值;从而使代码更加易于管理。

　　例如:

　　.box {

　　color: red;

　　}

　　.box .child-1 {

　　background: currentColor;

　　}

　　.box .child-2 {

　　color: currentColor;

　　border 1px solid currentColor;

　　}

　　在上面的代码片段中，你可以看到我们不是在边框、阴影上指定一个颜色，而是在这些属性上使用了currentColor，这将使它们自动变为red。

　　简化过渡和动画

　　currentColor可以使transitions和animations变得更加简单。所有使用currentColor 的属性会自动在hover时发生改变。

　　在伪元素上使用

　　像是:before 和 :after 这样的伪元素也同样可以通过用 currentColor 来获取它的父元素的值。这就可以用于创建带有动态颜色的『提示框』，或是使用 body 颜色的『覆盖层』，并给它一个半透明的效果。

　　.box {

　　color: red;

　　}

　　.box:before {

　　color: currentColor;

　　border: 1px solid currentColor;

　　}

　　在 SVG 中使用

　　SVG 中 currentColor 的值同样可以从父元素中获取。当你在不同地方应用 SVG 并想从父元素中继承 color 值而又不想每次明确提及时，使用它是相当有帮助的。

　　svg {

　　fill: currentColor;

　　}

　　在渐变中使用

　　currentColor 可以同样用于创建 CSS 渐变，其中渐变属性的一部分可以被设置成父元素的 currentColor 。

　　.box {

　　background: linear-gradient(top bottom right, currentColor, #FFFFFF);

　　}

　　CSS中currentColor属性是从CSS3引入SVG规范时产生的，因此除了IE8和一些低版本的浏览器不支持，其余的都是支持的。虽然其没有充分运用，但是使用后可以使代码更加整洁。