## 一、box-decoration-break &emsp;&emsp;CSS3新增的box-decoration-break屬性可指定行內非替換元素在跨行、跨列或跨頁時的樣式渲染，它包含兩個值： &emsp;&emsp;（1）slice：默認值，盒子會被分割成多部分。 &emsp;&emsp;（2）clone：斷開的各個盒子會單獨渲染。 &emsp;&emsp;下面用一個示例來演示兩種的區別，第一個span元素采用box-decoration-break的默認值，效果如第一張圖所示，在斷行處沒有左右內邊距和圓角；第二個span元素box-decoration-break的值為clone，效果如第二張圖所示，注意，在Chrome瀏覽器中要加屬性前綴。 ~~~html <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> ~~~   &emsp;&emsp;box-decoration-break可影響的CSS屬性包括background、border、border-image、box-shadow、border-radius、clip-path、margin和padding。 ## 二、contents &emsp;&emsp;當元素的CSS屬性display定義為contents后，它就會消失，不參與頁面的格式化，但不會隱藏子元素。 &emsp;&emsp;下面以兩組ul元素為例，第一組的ul元素包含邊框、寬度以及默認的邊距和列表項標記，效果如第一張圖所示；第二組的ul元素不再有之前的樣式，效果如第二張圖所示。 ~~~html <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> ~~~   &emsp;&emsp;注意，瀏覽器會移除所有display定義為contents的元素的可訪問性，這會導致該元素及其后續元素不再被屏幕閱讀技術訪問。 ## 三、計數模式 &emsp;&emsp;@counter-style是一條CSS語句，可定義計數模式，即修改計數器樣式，從而彌補了那些內置計數模式難以適應的場景。但要注意，目前只有Firefox瀏覽器能完美支持@counter-style。 &emsp;&emsp;每條@counter-style由一個名稱和一組描述符組成，其可用的描述符如下表所列。  **1）system** &emsp;&emsp;在system描述符中有五個比較容易理解的算法，如下所列。 &emsp;&emsp;（1）fixed：在遍歷了指定的記號后，恢復原來的計數模式。 &emsp;&emsp;（2）cyclic：循環遍歷指定的記號。 &emsp;&emsp;（3）symbolic：與cyclic類似，但每循環一次會疊加一個記號。 &emsp;&emsp;（4）alphabetic：與symbolic類似，但重復方式不同，記號會被解釋成數字，轉換為字母編號系統。 &emsp;&emsp;（5）numeric：與alphabetic類似，也是使用按位計數系統，但第一個記號從位置1開始，而不是0。 &emsp;&emsp;五種算法的效果如下圖所示，CSS代碼如下所示，因為代碼都比較類似，所以只給出了fixed。 ~~~css @counter-style fixed-digits { system: fixed; symbols: ① ②; } ul { list-style: fixed-digits; } ~~~  **2）擴展計數模式** &emsp;&emsp;system描述符中的extends能夠對現有的計數系統進行調整，例如將下面的digits中的每個記號用0來填充，并且添加冒號作為后綴。 ~~~css @counter-style digits { system: numeric; symbols: "0" "1" "2"; } @counter-style mydigits { system: extends digits; suffix: "："; pad: 3 "0"; } ul { list-style: mydigits; } ~~~ ## 四、自定義屬性 &emsp;&emsp;自定義屬性（custom property）并不是新增一個特殊的CSS屬性，而是聲明一個CSS變量，它以“--”為前綴。如果要定義全局的CSS變量，可以將其聲明到:root偽類中，如下所示。注意，自定義屬性可聲明在任意的選擇器中。 ~~~css :root { --orange-color: #F60; } ~~~ &emsp;&emsp;通過var()函數來引用自定義屬性，第一個參數是自定義屬性的名稱，第二個參數是備用值，如下所示。 ~~~css p { color: var(--orange-color, #FC0); } ~~~ &emsp;&emsp;雖然Sass、Less這些預處理器已經提供了變量，但是自定義屬性與它們相比，其優勢是實時性。因為它的值是由瀏覽器計算的，而預處理器是事先計算好的。 &emsp;&emsp;如果想體驗自定義屬性，但是又擔心瀏覽器的兼容性，那么可以試試查詢特性的@supports語句，可包含多個檢測條件，其語法與媒體查詢類似。當在不支持自定義屬性的瀏覽器中運行下面這段CSS時，@supports內的聲明塊會被跳過。 ~~~css @supports (--orange-color: #F60) { p { color: blue; } } ~~~ ## 五、顏色關鍵字 **1） transparent** &emsp;&emsp;在CSS中，transparent關鍵字相當于rgba(0,0,0,0)。當作為background的屬性值時（如下所示），僅僅是將元素的背景設為透明，元素中的內容還能顯示。與opacity:0不同，opacity會把元素和內容當成一個整體，當定義為0時，兩者都會透明。 ~~~css p { background: transparent; } /* 不同 */ p { opacity: 0; } ~~~ **2）currentColor** &emsp;&emsp;此關鍵字表示當前元素的color屬性的計算值。在下面的示例中，p是div的子元素，因為p的color屬性繼承自div的color屬性，所以currentColor的值為#F60。 ~~~css div { color: #F60; } div > p { background: currentColor; } ~~~ ***** > 原文出處： [博客園-CSS躬行記](https://www.cnblogs.com/strick/category/1667864.html) [知乎專欄-CSS躬行記](https://zhuanlan.zhihu.com/pwcss) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。