CSS躬行記（1）——CSS基礎拾遺

• 2020 年 3 月 30 日
• 筆記

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