CSS 有史以来第一个变量—currentColor

CSS 颜色(第三版)规范中,增加了很多颜色关键字,比如lightgoldenrodyellow等,不是很常用,但是我们还得到了一个特殊的关键字currentColor,他是从SVG那里借鉴来的。这个关键字并没有绑定到一个固定的颜色值,而是一直被解析为color。实际上,这个特性让它成为***CSS中有史以来的第一个变量。
比如我们想让所有的水平分割线(所有的<hr>元素)自动与文本的颜色保持一致。
用currentColor我们可以这样写:

hr {
    height: .5em;
    backgorund: currentColor;
}

上面代码显示的效果是0.5em 高度的背景颜色是当前的标签所继承的文字颜色
currentColor是 color 属性的值,具体意思是指:currentColor关键字的使用值是 color 属性值的计算值。如果currentColor关键字被应用在 color 属性自身,则相当于是color: inherit

inherit:
可以用在任何CSS属性中,这从w3cschool文档中就已经体现了,它总是绑定到父元素的计算值(对伪元素来说,则会取生成该伪元素的宿主元素)。举例来说,要把表单元素的字体设定为与页面的其他部分相同,你并不需要重复指定字体属性,只需要利用inherit
我们可以结合CSS3 animation 来实现一个不断改变的背景颜色:
HTML:

<h1>Using currentColor for fun and profit</h1>
<p>In pure CSS you can use <code>currentColor</code> wherever you migth use a normal color value. This maps to whatever the current value of color is.</p>
<p>Go ahead, stick <code>currentColor</code> in gradients and backgrounds. It’s already the default for text, borders, and drop shadows so you don’t even need to define current color there.</p>

<button>Foobar</button>

CSS:

/*||||||||||||||||||||||||||||||||||

Just change this color.             */

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;
}

演示地址

推荐阅读更多精彩内容

  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    hiuman阅读 216评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 624评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 667评论 0 9
  • FreeCodeCamp - HTML5 and CSS 发现原来在另外一台电脑学 FreeCodeCamp 的时...
    付林恒阅读 7,376评论 2 16
  • 尽量减少代码重复 在软件开发中,保持代码的DRY 和可维护性是最大的挑战之一,而这句话对CSS 也是适用的。在实践...
    图灵教育阅读 759评论 0 14