CSS3中currentColor关键字的妙用

作者：刘哇勇字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含currentcolor,css currentcolor,fill currentcolor,currentcolor什么意思,css3关键帧动画等相关知识,刘哇勇希望在学习及工作中可以帮助到您

初识

它是何物？具有怎样的功效？它从哪里来？带着这些疑问我们继续。

下面是来自MDN的解释：

currentColor代表了当前元素被应用上的color颜色值。使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。

你这可以这么理解，CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。

到此似乎解决了上面三个哲学式的提问，但依然有些模糊。程序员之间的交流，还是上码才好。

场景1

</div>

<p>约么？</p>
p{
color: red;
}

</div> </div>

此时，<p>标签currentColor的值为red。

场景2

</div>

<div class="container">
<p>约么？</p>
</div>
.container{
color: #00ff00;
}

</div> </div>

现在，我们没有给<p>标签指定颜色，它的color从父级容器也就是class为container的div继承而来，换句话说此时p标签的color为#00ff00，currentColor又是直接去取元素的color值，所以此时p标签的currentColor值也为#00ff00。
2016227111701365.jpg (430×378)

场景3
如果父级元素也没有写color呢？其实这里都还是CSS规则的范畴，跟本文的主角关系不太大。但本着不啰嗦会死的原则，就展开了讲。

如果父级元素也没有指定颜色，那它的父级元素就会从父级的父级去继承，直到文档的根结点html标签都还没显示指定一个颜色呢，就应用上浏览器默认的颜色呗~

</div>

<!doctype html>
<html>
<head>
<title>我来组成头部</title>
</head>
<body>
<p>约么？</p>
</body>
<footer>战神金钢，宇宙的保护神！</footer>
</html>
/**
* 无CSS
*/

</div> </div>

2016227111740673.jpg (759×247)

那，这个时候的黑色其实是浏览器默认给的。此时p标签的currentColor自然也跟color值一样，为黑色，纯黑的#000。

如何用？

了解它是怎样的物品后，下面问题来了，如何用？有额外的buff效果么，耗蓝多么，CD时间长么。。。

前面说道，它就是一个CSS变量，存储了颜色值，这个值来自当前元素的colorCSS属性。当你需要为该元素其他属性指定颜色的时候，它就可以登上舞台了。

</div>

<div class="container">
好好说话，有话好好说
</div>
.container{
color: #3CAADB;
border: 4px solid currentColor;
}

</div> </div>

2016227111807718.png (1063×50)

这里我们第一次领略了currentColor的奇效。在指定边框颜色的时候，我们直接使用currentColor变量，而没有写一个传统的颜色值。

你似乎也知道了该如何用了。不只是border，其他能够使用颜色的地方，比如background，box-shadow等等。
与渐变混搭

你可能无法想象到的是，除了可以将currentColor用到普通需要颜色的场景，它同样可以被用在渐变中。

</div>

<div class="container">
</div>
.container{
height:

您可能想查找下面的文章:

CSS3中currentColor关键字的妙用

相关文章

2017-06-02IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2017-06-02css3 盒模型以及box-sizing属性全面了解
2017-06-02CSS3中设置3D变形的transform-style属性详解
2017-06-02纯CSS3实现图片无间断轮播效果
2017-06-02利用css3实现的简单的鼠标悬停按钮
2017-06-02css3弹性盒模型（Flexbox）详细介绍
2017-06-02一款纯css3实现简单的checkbox复选框和radio单选框
2017-06-02基于CSS3实现的黑色个性导航菜单效果
2017-06-02CSS3制作hover下划线动画
2017-06-02前端隐藏出边界内容的实现方法