CSS3中currentColor关键字的妙用

2023-03-25 19:11:04分类：常见问题 / CSS3 答疑阅读(5310)评论(0)

这篇文章主要介绍了CSS3中currentColor关键字的妙用,合理地使用currentColor往往会让CSS代码更加简洁,同时也能与SVG图标很好地结合使用,需要的朋友可以参考下

初识

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

下面是来自MDN的解释：

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

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

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

场景1

CSS Code复制内容到剪贴板

  1. 约么？

      
  2. p{   
  3.     color: red;   
  4. }  

此时，

标签currentColor的值为red。

场景2

CSS Code复制内容到剪贴板
  1. "container">   
  2.     

    约么？

      
  
  • .container{   
  •     color: #00ff00;   
  • }   

    • 现在，我们没有给

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

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

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

    XML/HTML Code复制内容到剪贴板
    1. >  
    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.  */  

    2016227111740673.jpg-600 (759×247)

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

    如何用？

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

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

    CSS Code复制内容到剪贴板
    1. "container">   
    2.     好好说话，有话好好说   
      
  • .container{   
  •     color: #3CAADB;   
  •     border: 4px solid currentColor;   
  • }  

    • 2016227111807718.png-600 (1063×50)

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

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

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

    CSS Code复制内容到剪贴板
    1. "container">   
      
  • .container{   
  •   height:200px;   
  •   color: #3CAADB;   
  •   background-image: linear-gradient(to rightright, #fff, currentColor 100%);   
  • }  

    • 2016227111918197.png-600 (1023×188)

    甚至也可用于填充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中currentColor关键字的妙用的详细内容，更多请关注0133技术站其它相关文章！

    赞(0) 打赏
    未经允许不得转载：0133技术站首页 » CSS3 答疑

    相关文章

    常见问题

    HTML5 答疑CSS3 答疑JavaScript 答疑JSON 答疑jQuery 答疑Angular.js 答疑Node.js答疑React 答疑Vue.js 答疑前端答疑其他答疑

    置顶推荐

    猜你喜欢