㈠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设定

   <!DOCTYPE html>

   <html lang="en">

   <head>

       <meta charset="UTF-8">

       <style>

       div{

           font-size:16px;

          color:skyblue;

          border:1px solid currentColor;

          text-align:center;

      }

      </style>

      <title>当前元素有color设定</title>

  </head>

  <body>

      <div>currentColor显示当前颜色为天蓝色</div>

  </body>

  </html>

 

效果为：

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

   <!DOCTYPE html>

   <html lang="en">

   <head>

       <meta charset="UTF-8">

       <style>

       div{  //父元素

          font-size:16px;

          color:deeppink;

          text-align:center;

       }

      p:nth-of-type(1){   //子元素

                       width: 200px;

                       border: 1px  solid currentColor;

                       box-shadow: 5px 5px 5px currentColor;

                       }

      </style>

      <title>当前元素无color设定，但父元素有设定color值</title>

  </head>

  <body>

      <div><p>currentColor显示当前颜色为深粉色</p></div>

  </body>

  </html>

 

效果为：

 

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style>

     div{  //父元素

         font-size:16px;

         text-align:center;

      }

     p:nth-of-type(1){   //子元素

                      width: 200px;

                      border: 1px  solid currentColor;

                      box-shadow: 5px 5px 5px currentColor;

                      }

     </style>

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

 </head>

 <body>

     <div><p>currentColor显示当前颜色为浏览器默认的黑色</p></div>

 </body>

 </html>

效果为：

㈣demo

⑴配合svg

效果为：

⑵配合背景渐变 

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style>

     .button{

             padding:.3em .8em;

             border:1px solid #ddd;

             border-radius:.2em;

             color:#fff;

             background:#58a -webkit-linear-gradient(hsla(0,0%,100%,.2), currentColor);

             background:#58a -o-linear-gradient(hsla(0,0%,100%,.2), currentColor);

             background:#58a linear-gradient(hsla(0,0%,100%,.2), currentColor);

             box-shadow:0 .05em.25emrgba(0,0,0,.5);

             text-shadow:0-0.05em.05emrgba(0,0,0,.5);

             font-size:125%; /*假设父元素为16px;*/

             line-height:1.5;

            }

     div{

         height: 40px;

         width: 40px;

         margin: 0 auto;

     }

     </style>

     <title>配合背景渐变</title>

 </head>

 <body>

     <div class="button">

       按钮

     </div>

 </body>

 </html>

 

效果如下：

⑶配合动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style>

     html {

           color: red;

           animation: color 30s linear infinite;

           }

     @keyframes color {

                        33.3% { color: #0f0; }

                        66.7% { color: #00f; }

                        }

     body {

           font-family: sans-serif;

           margin: 2em;

           border-top: 2px solid;

           position: relative;

           padding: 1em;

         }

     body:before {

                  content: "";

                  position: absolute;

                  display: block;

                  top: 0;

                  bottom: 0;

                  left: 0;

                  right: 0;

                  opacity: .1;

                  background-color: currentColor;

                  background-image: linear-gradient(to bottom, currentColor, #fff);

              }

     p, h1 {

            color: black;

            margin-top: 0;

         }

     button {

             color: inherit;

             display: block;

             text-decoration: none;

             padding: .5em 1em;

             background: white;

             border: 2px solid;

             margin: 0 auto;

             border-radius: .5em;

             box-shadow: 2px 2px;

             font-weight: bold;

         }

      </style>

     <title>配合动画</title>

 </head>

 <body>

     <h1>Using currentColor for fun and profit</h1>

     <p> <code>currentColor</code> 在纯CSS中，您可以在任何可能使用普通颜色值的地方使用currentcolor。这将映射到颜色的当前值。</p>

     <p> <code>currentColor</code> 继续，在渐变和背景中粘贴当前颜色。它已经是文本、边框和放置阴影的默认设置，因此您甚至不需要在其中定义当前颜色。</p>

     <button>播放器</button>

 </body>

 </html>

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

 

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

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

CSS currentColor 变量的更多相关文章

  1. CSS currentColor 变量的使用

    CSS中存在一个神秘的变量,少有人知自然也不怎么为人所用.它就是crrentColor变量(或者说是CSS关键字,但我觉得称为变量好理解些). 初识 它是何物?具有怎样的功效?它从哪里来?带着这些疑问 ...

  2. css - 原生变量及使用函数 var()

    零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过  --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...

  3. CSS currentColor研究

    刚刚写了篇<CSS变量试玩儿>,我们了解到可以使用原生的CSS来定义使用变量,简化CSS书写.优化代码的组织与维护,但可怕的兼容性问题,又让我们望而却步.一笑了之. 但是有这么一个CSS变 ...

  4. 原生css 中变量的使用

    前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 ...

  5. css原生变量var()

    了解css/css3原生变量var 阮一峰css变量教程 深入学习css自定义属性(css变量)

  6. css原生变量 var

    css 变量的支持情况: 在pc端支持还不错,ie不支持,移动端也不支持,大概这就是css变量没有广泛使用的原因吧 CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量,方便代码 ...

  7. css的变量教程,更强大的css

    当微软宣布 Edge 浏览器将支持 CSS 变量.这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 声明变量的时 ...

  8. css定义变量_css原生变量的使用和兼容 附带还有更高性能，文件更高压缩率的好处

    在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本.我们需要使用CSS预编译工具[Sass/Less/Stylus],随着这些工具的流行,CSS变量也开始规范制定,目前很多 ...

  9. CSS变量（自定义属性）实践指南

    本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...

随机推荐

  1. Django2.2 连接mySQL数据库

    一.Django2.2连接数据库(踩雷) 首先,Django2.2自带的是sqlite3数据库,但我们学的是mysql,因此学着连接(在mysql环境搭建成功的情况下)---参考博客: https:/ ...

  2. 阿里云对象存储OSS

    阿里云的产品种类繁多,今天让我们一起来了解下对象存储(Object Storage Service,简称OSS)吧! 什么是对象存储呢? 简单来说,对象存储OSS是阿里云提供的海量.安全和高可靠的云存 ...

  3. .Net Core 3.0使用Grpc进行远程过程调用

    因为.Net Core3.0已经把Grpc作为一等臣民了,作为爱好新技术的我,当然要尝鲜体验一下了,当然感觉是Grpc作为跨语言的产品做的相当好喽,比起Dubbo这种的,优势和劣势还是比较明显的. 我 ...

  4. CSP-J 2019 T3 纪念品

    \(\mathfrak{a}\).反思: 通过这道题成功发现自己的背包还是很差\(w\): 可能这是我\(gu\)了好久好久博客的报应叭 就在做这个题的时候,自己连背包\(dp\)的思想都忘了 背包可 ...

  5. Luogu P3810 【模板】三维偏序（陌上花开）（CDQ分治）

    题目 以三维偏序为例来讲一下CDQ分治. CDQ的本质就是把一个序列分成两段,计算左边对右边的贡献,然后分治. 不过一般都是先分治到底再从下往上算,这样可以先归并再算. 比如这道题,我们先按第一维排序 ...

  6. JMS消息通信服务

    什么是Java消息服务 Java消息服务指的是两个应用程序之间进行异步通信的API,它为标准消息协议和消息服务提供了一组通用接口,包括创建.发送.读取消息等,用于支持JAVA应用程序开发.在J2EE中 ...

  7. Python简单主机批量管理工具

    一.程序介绍 需求: 简单主机批量管理工具 需求: 1.主机分组 2.主机信息使用配置文件 3.可批量执行命令.发送文件,结果实时返回 4.主机用户名密码.端口可以不同 5.执行远程命令使用param ...

  8. 【原创】大叔经验分享（55）spark连接kudu报错

    spark-2.4.2kudu-1.7.0 开始尝试 1)自己手工将jar加到classpath spark-2.4.2-bin-hadoop2.6+kudu-spark2_2.11-1.7.0-cd ...

  9. qt webengineview 加载本地资源方式

    一.如果把资源添加到本地资源qrc库里了,请使用 ui->preview->setUrl(QUrl("qrc:/HelloWorld2.html")): 二.如果没有现 ...

  10. 上海的Costco，谈谈你的理解和感受

    众所周知,Costco在上海第一天开业,由于人流量过大,一度暂停营业.我觉得Costco的成功在于不走寻常路,换位思考(站在用户.厂商角度看问题),下面几点是我觉得它做得比较独特的地方: 1. Cos ...