CSS3中currentColor重要字的妙用

日期：2021-03-04 类型：科技新闻 

关键词：小程序怎么做，凡科网小程序，微信小程序界面，线上报名小程序，微信小程序页面制作

初识

它是何物？具备如何的作用？它从哪里来？带着这些疑惑大家再次。

下面是来自MDN的解释：

currentColor意味着了当今元素被运用上的color色调值。 应用它能够将当今这个色调值运用到别的特性上，或嵌套循环元素的别的特性上。

你这能够这么了解，CSS里你能够在任何必须写色调的地区应用currentColor这个自变量，这个自变量的值是当今元素的color值。假如当今元素沒有在CSS里显示信息地特定1个color值，那它的色调值就遵循CSS标准，从父级元素承继而来。

到此好像处理了上面3个社会学式的发问，但仍然一些模糊不清。程序流程员之间的沟通交流，還是上码才好。

情景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标识还没有显示信息特定1个色调呢，就运用上访问器默认设置的色调呗~

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值1样，为黑色，纯黑的#000。

怎样用？

掌握它是如何的物件后，下面难题来了，怎样用？有附加的buff实际效果么，耗蓝多么的，CD時间长么。。。

前面说道，它便是1个CSS自变量，储存了色调值，这个值来自当今元素的colorCSS特性。当你必须为该元素别的特性特定色调的情况下，它便可以登上舞台了。

CSS Code拷贝內容到剪贴板
  1. <div class="container">   
  2.     好好讲话，有话好好说   
  3. </div>   
  4. .container{   
  5.     color: #3CAADB;   
  6.     border: 4px solid currentColor;   
  7. }  

这里大家第1次领略了currentColor的奇效。在特定边框色调的情况下，大家立即应用currentColor自变量，而沒有写1个传统式的色调值。

你好像也了解了该怎样用了。不只是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. }  
上一篇：CSS完成小精灵图与字体样式标志 返回下一篇：没有了