CSS3中currentColor关键字的妙用

西沉的红日,把缕缕落寂的橘红涂满天际。夕阳下,沧桑古老的小道上充满着迷离的格调,显得格外的幽静。天地万物似乎都酣醉在这片凝固着却极短暂的美丽之中,止住了一切声响。

初识

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

下面是来自MDN的解释:

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

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

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

场景1

CSS Code复制内容到剪贴板
  1. <p>约么?</p>
  2. p{
  3. color:red;
  4. }

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

场景2

CSS Code复制内容到剪贴板
  1. <divclass="container">
  2. <p>约么?</p>
  3. </div>
  4. .container{
  5. color:#00ff00;
  6. }

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <!doctypehtml>
  2. <html>
  3. <head>
  4. <title>我来组成头部</title>
  5. </head>
  6. <body>
  7. <p>约么?</p>
  8. </body>
  9. <footer>战神金钢,宇宙的保护神!</footer>
  10. </html>
  11. /**
  12. *无CSS
  13. */

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

如何用?

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

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

CSS Code复制内容到剪贴板
  1. <divclass="container">
  2. 好好说话,有话好好说
  3. </div>
  4. .container{
  5. color:#3CAADB;
  6. border:4pxsolidcurrentColor;
  7. }

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

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

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

CSS Code复制内容到剪贴板
  1. <divclass="container">
  2. </div>
  3. .container{
  4. height:200px;
  5. color:#3CAADB;
  6. background-image:linear-gradient(torightright,#fff,currentColor100%);
  7. }

甚至也可用于填充svg,下面会有相应示例。

currentColor 与SVG

我们可以使用 currentColor 来检测元素当前使用的颜色,因而不需要定义 color 很多次。
结合 SVG 图标使用时,currentColor 是很有用的,因为图标颜色的改变取决于它们的父元素。通常我们是这么做的:

CSS Code复制内容到剪贴板
  1. .button{
  2. color:black;
  3. }
  4. .button:hover{
  5. color:red;
  6. }
  7. .button:active{
  8. color:green;
  9. }
  10. .buttonsvg{
  11. fill:black;
  12. }
  13. .button:hoversvg{
  14. fill:red;
  15. }
  16. .button:activesvg{
  17. fill:green;
  18. }

使用 currentColor 之后:

CSS Code复制内容到剪贴板
  1. svg{
  2. fill:currentColor;
  3. }
  4. .button{
  5. color:black;
  6. border:1pxsolidcurrentColor;
  7. }
  8. .button:hover{
  9. color:red;
  10. }
  11. .button:active{
  12. color:green;
  13. }

另一种方式是用于伪元素:

CSS Code复制内容到剪贴板
  1. a{
  2. color:#000;
  3. }
  4. a:hover{
  5. color:#333;
  6. }
  7. a:active{
  8. color:#666;
  9. }
  10. a:after,
  11. a:hover:after,
  12. a:active:after{
  13. background:currentColor;
  14. ...
  15. }

本文CSS3中currentColor关键字的妙用到此结束。想要看清事实,必须要经历一些疼痛。小编再次感谢大家对我们的支持!

标签: currentColor