css 特殊属性

css 特殊属性

inherit 继承

能够用在任何 CSS 属性中,并且它老是绑定到父元素的计算值(对伪元素来讲,则会取生成该伪元素的宿主元素)

div{
  border:1px solid lightblue;
}
div span{
  border:inherit;
}

currentColor 颜色关键字

自动地从文本颜色那里获得颜色
由于 currentColor 自己就是不少 CSS 颜色属性的初始值,好比 border-color 和 outline-color,以及 text-shadow 和 box-shadow 的颜色值,等等。

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

--accent-color

ul {
    --accent-color: red;
  }
  
  ol {
    --accent-color: blue;
  }
  
  li {
    background-color: var(--accent-color);
  }

calc()

calc()内部的-和+运算符两侧各家一个空白符，不然会解析错误

div.calc{
  background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a;
  background-position: calc(100% - 20px) calc(100% - 10px);

  /* Styling */
  max-width: 10em;
  min-height: 5em;
  padding: 10px;
  color: white;
}