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