CSS3中currentColor关键字的妙用

前端  /  管理员 发布于 7年前   174

初识

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

下面是来自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。

场景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.  */  

那，这个时候的黑色其实是浏览器默认给的。此时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. }  

这里我们第一次领略了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. }  

甚至也可用于填充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的object-fit来调整图片适配尺寸的技巧简介
    下一条：
    细说CSS中margin属性的使用

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客