当前位置 : 主页 > 网页制作 > css >

CSS3中currentColor关键字的妙用

来源:互联网 收集:自由互联 发布时间:2022-04-17
初识 它是何物?具有怎样的功效?它从哪里来?带着这些疑问我们继续。 下面是来自MDN的解释: currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到

初识

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

下面是来自MDN的解释:

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

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

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

场景1

CSS Code复制内容到剪贴板
  1. <p>约么?</p>   
  2. p{   
  3.     colorred;   
  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。
2016227111701365.jpg (430×378)

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

2016227111740673.jpg (759×247)

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

如何用?

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

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

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

2016227111807718.png (1063×50)

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

2016227111918197.png (1023×188)

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

currentColor 与SVG

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

CSS Code复制内容到剪贴板
  1. .button {   
  2.   colorblack;   
  3. }   
  4. .button:hover {   
  5.   colorred;   
  6. }   
  7. .button:active {   
  8.   colorgreen;   
  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.   colorblack;   
  7.   border1px solid currentColor;   
  8. }   
  9. .button:hover {   
  10.   colorred;   
  11. }   
  12. .button:active {   
  13.   colorgreen;   
  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. }  
【文章转自高防服务器 http://www.558idc.com 复制请保留原URL】
网友评论