一、box-decoration-break

　　CSS3新增的box-decoration-break屬性可指定行內非替換元素在跨行、跨列或跨頁時的樣式渲染，它包含兩個值：

　　（1）slice：預設值，盒子會被分割成多部分。

　　（2）clone：斷開的各個盒子會單獨渲染。

　　下面用一個示例來演示兩種的區別，第一個span元素採用box-decoration-break的預設值，效果如第一張圖所示，在斷行處沒有左右內邊距和圓角；第二個span元素box-decoration-break的值為clone，效果如第二張圖所示，注意，在Chrome瀏覽器中要加屬性字首。

<style>
  span {
    border-radius: 10px;
    padding: 0 10px;
  }
  span.clone {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
</style>
<div>
  <span>測試CSS屬性，box-decoration-break:slice</span>
</div>
<div>
  <span class="clone">測試CSS屬性，box-decoration-break:clone</span>
</div>

　　box-decoration-break可影響的CSS屬性包括background、border、border-image、box-shadow、border-radius、clip-path、margin和padding。

二、contents

　　當元素的CSS屬性display定義為contents後，它就會消失，不參與頁面的格式化，但不會隱藏子元素。

　　下面以兩組ul元素為例，第一組的ul元素包含邊框、寬度以及預設的邊距和列表項標記，效果如第一張圖所示；第二組的ul元素不再有之前的樣式，效果如第二張圖所示。

<style>
  ul {
    border: 1px solid #000;
    width: 100px;
  }
  ul.contents {
    display: contents;
  }
</style>
<ul>
  <li>Strick</li>
  <li>Freedom</li>
  <li>Justify</li>
</ul>
<ul class="contents">
  <li>Strick</li>
  <li>Freedom</li>
  <li>Justify</li>
</ul>

　　注意，瀏覽器會移除所有display定義為contents的元素的可訪問性，這會導致該元素及其後續元素不再被螢幕閱讀技術訪問。

三、計數模式

　　@counter-style是一條CSS語句，可定義計數模式，即修改計數器樣式，從而彌補了那些內建計數模式難以適應的場景。但要注意，目前只有Firefox瀏覽器能完美支援@counter-style。

　　每條@counter-style由一個名稱和一組描述符組成，其可用的描述符如下表所列。

1）system

　　在system描述符中有五個比較容易理解的演算法，如下所列。

　　（1）fixed：在遍歷了指定的記號後，恢復原來的計數模式。

　　（2）cyclic：迴圈遍歷指定的記號。

　　（3）symbolic：與cyclic類似，但每迴圈一次會疊加一個記號。

　　（4）alphabetic：與symbolic類似，但重複方式不同，記號會被解釋成數字，轉換為字母編號系統。

　　（5）numeric：與alphabetic類似，也是使用按位計數系統，但第一個記號從位置1開始，而不是0。

　　五種演算法的效果如下圖所示，CSS程式碼如下所示，因為程式碼都比較類似，所以只給出了fixed。

@counter-style fixed-digits {
  system: fixed;
  symbols: ① ②;
}
ul {
  list-style: fixed-digits;
}

2）擴充套件計數模式

　　system描述符中的extends能夠對現有的計數系統進行調整，例如將下面的digits中的每個記號用0來填充，並且新增冒號作為字尾。

@counter-style digits {
  system: numeric;
  symbols: "0" "1" "2";
}
@counter-style mydigits {
  system: extends digits;
  suffix: "：";
  pad: 3 "0";
}
ul {
  list-style: mydigits;
}

四、自定義屬性

　　自定義屬性（custom property）並不是新增一個特殊的CSS屬性，而是宣告一個CSS變數，它以“--”為字首。如果要定義全域性的CSS變數，可以將其宣告到:root偽類中，如下所示。注意，自定義屬性可宣告在任意的選擇器中。

:root {
  --orange-color: #F60;
}

　　通過var()函式來引用自定義屬性，第一個引數是自定義屬性的名稱，第二個引數是備用值，如下所示。

p {
  color: var(--orange-color, #FC0);
}

　　雖然Sass、Less這些前處理器已經提供了變數，但是自定義屬性與它們相比，其優勢是實時性。因為它的值是由瀏覽器計算的，而前處理器是事先計算好的。

　　如果想體驗自定義屬性，但是又擔心瀏覽器的相容性，那麼可以試試查詢特性的@supports語句，可包含多個檢測條件，其語法與媒體查詢類似。當在不支援自定義屬性的瀏覽器中執行下面這段CSS時，@supports內的宣告塊會被跳過。

@supports (--orange-color: #F60) {
  p {
    color: blue;
  }
}

五、顏色關鍵字

1） transparent

　　在CSS中，transparent關鍵字相當於rgba(0,0,0,0)。當作為background的屬性值時（如下所示），僅僅是將元素的背景設為透明，元素中的內容還能顯示。與opacity:0不同，opacity會把元素和內容當成一個整體，當定義為0時，兩者都會透明。

p {
  background: transparent;
}
/* 不同 */
p {
  opacity: 0;
}

2）currentColor

　　此關鍵字表示當前元素的color屬性的計算值。在下面的示例中，p是div的子元素，因為p的color屬性繼承自div的color屬性，所以currentColor的值為#F60。

div {
  color: #F60;
}
div > p {
  background: currentColor;
}

&n