欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS3中currentColor关键字的妙用

程序员文章站 2022-05-30 23:04:56
这篇文章主要介绍了CSS3中currentColor关键字的妙用,合理地使用currentColor往往会让CSS代码更加简洁,同时也能与SVG图标很好地结合使用,需要的朋友可以参考下... 16-02-27...

初识

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

下面是来自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. <div class="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。
CSS3中currentColor关键字的妙用

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

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

xml/html code复制内容到剪贴板
  1. <!doctype html>  
  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.  */  

CSS3中currentColor关键字的妙用

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

如何用？

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

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

css code复制内容到剪贴板
  1. <div class="container">   
  2.     好好说话，有话好好说   
  3. </div>   
  4. .container{   
  5.     color: #3caadb;   
  6.     border: 4px solid currentcolor;   
  7. }  

CSS3中currentColor关键字的妙用

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

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

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

css code复制内容到剪贴板
  1. <div class="container">   
  2. </div>   
  3. .container{   
  4.   height:200px;   
  5.   color: #3caadb;   
  6.   background-image: linear-gradient(to rightright, #fff, currentcolor 100%);   
  7. }  

CSS3中currentColor关键字的妙用

甚至也可用于填充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.   
  11. .button svg {   
  12.   fill: black;   
  13. }   
  14. .button:hover svg {   
  15.   fill: red;   
  16. }   
  17. .button:active svg {   
  18.   fill: green;   
  19. }  

使用 currentcolor 之后：

css code复制内容到剪贴板
  1. svg {     
  2.   fill: currentcolor;   
  3. }   
  4.   
  5. .button {   
  6.   color: black;   
  7.   border: 1px solid currentcolor;   
  8. }   
  9. .button:hover {   
  10.   color: red;   
  11. }   
  12. .button:active {   
  13.   color: green;   
  14. }  

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

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

上一篇： 世界十大诡异的地方 地下墓穴全是骷髅，娃娃岛你敢去吗

下一篇： CSS3中几个新增加的盒模型属性使用教程

推荐阅读