CSS3在currentcolor关键词应用

相识

这是怎么一回事效果如何它来自哪里带着这些问题，我们继续。

以下是来自MDN说明：

currentcolor表示用于当前元素的颜色值，它可以用来将当前颜色值的其他属性，或嵌套元素的其他属性。

你可以理解这一点。在CSS，你可以在任何你想写的颜色的地方使用currentcolor变量。这个变量的值是当前元素的颜色值。如果当前元素没有在CSS中指定一个颜色值，它的颜色值将遵循CSS规则，并从父元素继承。

这似乎已经解决了上述三个哲学问题，但仍然有点模糊。程序员之间的沟通，或代码是好的。

场景1
CSS代码将内容复制到剪贴板。
关于
P {
颜色：红色；
}

在这一点上，标签的currentcolor价值是红色的。
场景2
CSS代码将内容复制到剪贴板。
关于

集装箱{。
颜色：# 00ff00；
}

现在，我们不需要标签指定的颜色，它的颜色是从父容器div容器类继承，换句话说，P标签的颜色# 00ff00，currentcolor直接获取元素的颜色值，使P currentcolor值标签的# 00ff00。
场景3
如果父元素不写颜色怎么办事实上，它仍然是CSS规则的范畴，与本文主要人物的关系不是很大，但在长篇大论的原则下，开始说话了。

如果父元素没有指定颜色，它的父元素将继承父级的父级。在文档的根节点未显示指定的HTML颜色之前，它应用浏览器的默认颜色。

xml代码将内容复制到剪贴板。
我要补上脑袋。
关于

战争之神，宇宙之神，宇宙的保护者！
*没有CSS
* /

好的，黑色的是此时为浏览器的默认。p标签currentcolor自然色值，黑色，黑色# 000。

怎么用它

知道了这是什么，接下来的问题就来了。怎么用它你有一个额外的BUFF效果，多少蓝色，CD是多长。

正如我们之前所说的，这是一个CSS变量存储的颜色值，而从当前元素的colorcss属性。当你需要指定该元素的其他属性的一种颜色，它可以在舞台上。

CSS代码将内容复制到剪贴板。
说得好，说得好

集装箱{。
颜色：# 3caadb；
边境：4px固体currentcolor；
}

在这里，我们第一次品尝的currentcolor效果。指定边框的颜色时，我们使用currentcolor变量，而不是写一个传统的颜色值。

你似乎知道如何使用它，不仅仅是边框，还有其他可以使用颜色的地方，比如背景、框阴影等等。
渐变交融

你可能想象不到的是，它也可以用在除了对currentcolor场景中，需要一个正常使用颜色梯度。

CSS代码将内容复制到剪贴板。

集装箱{。
身高：200px；
颜色：# 3caadb；
背景图像：线性梯度（要放，# FFF，currentcolor 100%）；
}

它甚至可以用来填充SVG，并且会有一个相应的例子。

currentcolor和SVG

我们可以用currentcolor检测目前使用的元素的颜色，所以我们不需要定义颜色很多次。
currentcolor是有用的当用SVG图标，在图标的颜色变化取决于他们的父元素。通常我们做。

CSS代码将内容复制到剪贴板。
{。
颜色：黑色；
}
{按钮：悬停
颜色：红色；
}
{按钮：活动
颜色：绿色；
}

按钮SVG {
填充：黑色；
}
按钮：悬停SVG {
填充：红色；
}
按钮：活动SVG {
填充：绿色；
}

使用后的currentcolor：

CSS代码将内容复制到剪贴板。
{ SVG
补：currentcolor；
}

{。
颜色：黑色；
border: 1px solid currentcolor；
}
{按钮：悬停
颜色：红色；
}
{按钮：活动
颜色：绿色；
}

另一种方法是伪元素：

CSS代码将内容复制到剪贴板。
{
颜色：# 000；
}
答：悬停{
颜色：# 333；
}
答：活动{
颜色：# 666；
}

答：之后，
答：悬停后，
答：活动：{
背景：currentcolor；
…
}