如何使用currentColor属性写出更好的CSS代码?

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和一些低版本的浏览器不支持，其余的都是支持的。虽然其没有充分运用，但是使用后可以使代码更加整洁。

本文题目：如何使用currentColor属性写出更好的CSS代码?
当前URL：https://www.cdcxhl.com/news29/312979.html

成都网站建设公司_创新互联，为您提供定制开发、外贸建站、搜索引擎优化、做网站、品牌网站建设、网站内链

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联