CSS3中currentColor关键字的妙⽤
初识
它是何物？具有怎样的功效？它从哪⾥来？带着这些疑问我们继续。
下⾯是来⾃MDN的解释：
currentColor代表了当前元素被应⽤上的color颜⾊值。使⽤它可以将当前这个颜⾊值应⽤到其他属性上，或者嵌套元素的其他属性上。
你这可以这么理解，CSS⾥你可以在任何需要写颜⾊的地⽅使⽤currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS⾥显⽰地指定⼀个color值，那它的颜⾊值就遵从CSS规则，从⽗级元素继承⽽来。
到此似乎解决了上⾯三个哲学式的提问，但依然有些模糊。程序员之间的交流，还是上码才好。
场景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标签都还没显⽰指定⼀个颜⾊呢，就应⽤上浏览器默认的颜⾊呗~
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值⼀样，为⿊⾊，纯⿊的#000。
如何⽤？
了解它是怎样的物品后，下⾯问题来了，如何⽤？有额外的buff效果么，耗蓝多么，CD时间长么。。。cssclass属性
前⾯说道，它就是⼀个CSS变量，存储了颜⾊值，这个值来⾃当前元素的colorCSS属性。当你需要为该元素其他属性指定颜⾊的时候，它就可以登上舞台了。
CSS Code复制内容到剪贴板
1. <div class="container">
2. 好好说话，有话好好说
3. </div>
4. .container{
5. color: #3CAADB;
6. border: 4px solid currentColor;
7. }
这⾥我们第⼀次领略了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. }
甚⾄也可⽤于填充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. }
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论