您现在的位置是：网站首页> 编程资料编程资料

CSS3中currentColor关键字的妙用

2023-10-23 236人已围观

简介 这篇文章主要介绍了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 (430×378)

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

    上一篇：魔幻般冒泡背景的CSS3按钮动画CSS3鼠标滑过图片效果 用Font Awesome库实现悬停图标基于CSS3实现鼠标滑过图片上移代码纯CSS3实现鼠标滑过按钮动画第二节

    下一篇：通过CSS3的object-fit来调整图片适配尺寸的技巧简介浅谈CSS中的 object-fit 与 object-position的使用

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网