CSS currentColor 变量

最新推荐文章于 2023-03-10 22:53:53 发布

banchi6453

最新推荐文章于 2023-03-10 22:53:53 发布

阅读量298

点赞数

原文链接：http://www.cnblogs.com/shihaiying/p/11353223.html

版权

㈠currentColor定义及理解

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

你这可以这么理解，CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。父元素未设定color值，会寻找祖先元素直到有设定color的元素为止，如果没有，以浏览器默认颜色为准。

㈡介绍currentColor相关知识

⑴来源于SVG，CSS3的变量，可以解决颜色属性无法继承的问题。

⑵不仅可以设置border，还可以设置outline-color，background，box-shadow、text-shadow等

⑶样式便于维护，但是需注意那些地方需要用到这个变量，否则可能导致一变全变。

⑷因为是CSS3提出的，所以IE9以下不支持。

㈢用法

⑴当前元素有color设定

 1   <!DOCTYPE html>
 2   <html lang="en">
 3   <head>
 4       <meta charset="UTF-8">
 5       <style>
 6       div{
 7   
 8           font-size:16px;
 9   
10          color:skyblue;
11  
12          border:1px solid currentColor;
13  
14          text-align:center;
15  
16      }
17      </style>
18      <title>当前元素有color设定</title>
19  </head>
20  <body>
21      <div>currentColor显示当前颜色为天蓝色</div>
22  </body>
23  </html>

效果为：

⑵当前元素无color设定，但父元素有设定color值。

 1   <!DOCTYPE html>
 2   <html lang="en">
 3   <head>
 4       <meta charset="UTF-8">
 5       <style>
 6       div{  //父元素
 7          font-size:16px;
 8          color:deeppink;
 9          text-align:center;
10       }
11  
12      p:nth-of-type(1){   //子元素
13                       width: 200px;
14                       border: 1px  solid currentColor;
15                       box-shadow: 5px 5px 5px currentColor;
16                       }
17  
18      </style>
19      <title>当前元素无color设定，但父元素有设定color值</title>
20  </head>
21  <body>
22      <div><p>currentColor显示当前颜色为深粉色</p></div>
23  </body>
24  </html>

效果为：

⑶父元素未设定color值，会寻找祖先元素直到有设定color的元素为止，如果没有，以浏览器默认颜色为准。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style>
 6     div{  //父元素
 7         font-size:16px;
 8         text-align:center;
 9      }
10 
11     p:nth-of-type(1){   //子元素
12                      width: 200px;
13                      border: 1px  solid currentColor;
14                      box-shadow: 5px 5px 5px currentColor;
15                      }
16 
17     </style>
18     <title>父元素未设定color值，会寻找祖先元素直到有设定color的元素为；如果没有，以浏览器默认颜色为准。</title>
19 </head>
20 <body>
21     <div><p>currentColor显示当前颜色为浏览器默认的黑色</p></div>
22 </body>
23 </html>

效果为：

㈣demo

⑴配合svg

效果为：

⑵配合背景渐变

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style>
 6     .button{
 7             padding:.3em .8em;
 8             border:1px solid #ddd;
 9             border-radius:.2em;
10             color:#fff;
11             background:#58a -webkit-linear-gradient(hsla(0,0%,100%,.2), currentColor);
12             background:#58a -o-linear-gradient(hsla(0,0%,100%,.2), currentColor);
13             background:#58a linear-gradient(hsla(0,0%,100%,.2), currentColor);
14             box-shadow:0 .05em.25emrgba(0,0,0,.5);
15             text-shadow:0-0.05em.05emrgba(0,0,0,.5);
16             font-size:125%; /*假设父元素为16px;*/
17             line-height:1.5;
18            }
19     div{
20         height: 40px;
21         width: 40px;
22         margin: 0 auto;
23     }
24     </style>
25     <title>配合背景渐变</title>
26 </head>
27 <body>
28     <div class="button">
29       按钮
30     </div>
31 </body>
32 </html>

效果如下：

⑶配合动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style>
 6     html {
 7           color: red;
 8           animation: color 30s linear infinite;
 9           }
10 
11     @keyframes color {
12                        33.3% { color: #0f0; }
13                        66.7% { color: #00f; }
14                        }
15 
16     body {
17           font-family: sans-serif;
18           margin: 2em;
19           border-top: 2px solid;
20           position: relative;
21           padding: 1em;
22         }
23 
24     body:before {
25                  content: "";
26                  position: absolute;
27                  display: block;
28                  top: 0;
29                  bottom: 0;
30                  left: 0;
31                  right: 0;
32                  opacity: .1;
33                  background-color: currentColor;
34                  background-image: linear-gradient(to bottom, currentColor, #fff);
35              }
36 
37     p, h1 {
38            color: black;
39            margin-top: 0;
40         }
41 
42     button {
43             color: inherit;
44             display: block;
45             text-decoration: none;
46             padding: .5em 1em;
47             background: white;
48             border: 2px solid;
49             margin: 0 auto;
50             border-radius: .5em;
51             box-shadow: 2px 2px;
52             font-weight: bold;
53         }
54      </style>
55     <title>配合动画</title>
56 </head>
57 <body>
58     <h1>Using currentColor for fun and profit</h1>
59     <p> <code>currentColor</code> 在纯CSS中，您可以在任何可能使用普通颜色值的地方使用currentcolor。这将映射到颜色的当前值。</p>
60     <p> <code>currentColor</code> 继续，在渐变和背景中粘贴当前颜色。它已经是文本、边框和放置阴影的默认设置，因此您甚至不需要在其中定义当前颜色。</p>
61 
62     <button>播放器</button>
63 </body>
64 </html>

效果如下：会在30秒内由红色到绿色到蓝色的匀速无限次循环播放

参考：https://www.bbsmax.com/A/RnJWrgYzqY/

以上就是有关currentColor的相关知识了，希望有所帮助。

转载于:https://www.cnblogs.com/shihaiying/p/11353223.html

banchi6453

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS currentColor 变量

㈠currentColor定义及理解来自MDN的解释：currentColor代表了当前元素被应用上的color颜色值。使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。你这可以这么理解，CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，...
复制链接

扫一扫