這兩天接觸到一個很有意思的 CSS 屬性 -- box-decoration-break。下麵就一起去一探究竟。 因為 MDN 上關於這個屬性，沒有中文文檔，所以一直在想一個合理貼切的中文翻譯。直譯一下： box -- 盒，可以理解為元素盒模型 decoration -- 裝飾，理解為元素樣式 br ...
這兩天接觸到一個很有意思的 CSS 屬性 -- box-decoration-break。下麵就一起去一探究竟。
因為 MDN 上關於這個屬性，沒有中文文檔，所以一直在想一個合理貼切的中文翻譯。直譯一下：
- box -- 盒，可以理解為元素盒模型
- decoration -- 裝飾，理解為元素樣式
- break -- 斷行，參考
word-break，理解為斷行時候的表現
那麼，這個屬性可以先理解為，元素在發生斷行時其樣式的表現形式。
MDN 上英文釋意為：The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages。大意是 box-decoration-break 屬性規定了一個元素片段在發生折行/斷行時，應該如何被渲染。
可選取值只有兩個：
{
box-decoration-break: slice; // 預設取值
box-decoration-break: clone;
}
換行示例
這個屬性通常作用於內聯元素。假設我們存在如下結構，並且給它添加一個邊框：
<span>ABCDEFGHIJKLMN</span>
span {
border: 2px solid #999;
}
嗯，效果如下，平平無奇：
好，接下來就是 break，我們把上面一行的文字斷行，樣式不變：
<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>
得到如下結果：
O，可以看到，文字換行的同時，邊框也隨之變化，頭尾兩行都有 3 邊邊框，中間兩行只有上下兩邊邊框。如果將 4 行合起來，可以拼成圖一，這個是正常的展示效果。
接下來，我們加上本文的主角 box-decoration-break: clone：
span {
border: 2px solid #999;
+ box-decoration-break: clone;
}
生效後，我們將會得到這樣的結果：
box-decoration-break: clone 使用小結
看到這裡，我們已經可以大概理解這個屬性的作用了：
使用了 box-decoration-break: clone 的內聯元素，如果存在折行顯示，那麼每一行都將擁有原本單行的所有完整樣式。
再看個例子加深下理解，存在如下結構，其使用了 box-decoration-break: clone 前後兩種效果：
<span >每一行 <br/>樣式 <br/> 都 <br/> 保持<br/> 完整獨立</span>
CodePen Demo -- box-decoration-break
box-decoration-break: clone 生效樣式影響範圍
當然，使用了 box-decoration-break: clone 的元素並非對每一個樣式都會生效，只會作用於下列樣式：
- background
- border
- border-image
- box-shadow
- clip-path
- margin
- padding
- Syntax
box-decoration-break: clone 實際應用
接下來看看，有沒有什麼靠譜的實際應用場景。
box-decoration-break: clone 實現文本選中效果
會有這樣的場景，我們希望對一個多行文本中的特定一段文本進行著重展示。這個時候，我們可以通過 <p> 嵌套 <span> ，對 <span> 包裹的文字進行一些特定的展示。
譬如我們有這樣一段文案：
<p> The <span>box-decoration-break</span> CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the <span>specified border, padding, and margin wrapping each fragment.</span> The border-radius, border-image, and box-shadow are applied to each <span>fragment independently.</span> </p>
其中，我們將需要強調的內容通過 <span> 標簽包裹起來，賦予特定樣式並且加上 box-decoration-break: clone，這樣，無論強調文案是否換行，每一處的強調背景都是一致的：
p {
font-size: 22px;
line-height: 36px;
}
span {
background-image: linear-gradient(135deg, deeppink, yellowgreen);
color: #fff;
padding: 2px 10px;
border-radius: 50% 3em 50% 3em;
box-decoration-break: clone;
}
得到如下效果：
如果不加 box-decoration-break: clone 呢？那麼如果存在換行，效果會大打折扣：
CodePen Demo -- text-decoration-break 文本選中效果
box-decoration-break 每行文字帶特定邊框
又會有這樣的場景，我們希望每一行文案都帶有特定的邊框樣式，像這樣：
怎麼實現呢？也許可以每一行都是一個 <p>，每一行 <p> 設定上述樣式。但是如果文本內容不確定，容器的寬度也不確定呢？
這種場景，使用 box-decoration-break 也非常便捷。當然這裡有個小技巧，正常而言， box-decoration-break: clone 只對 inline 元素生效，如果我們的文案像是這樣包裹在 <p> 標簽內：
<p> The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. </p>
要使 box-decoration-break: clone 對 <p> 生效，可以通過設定 <p> 的 display: inline 來實現。如此一來，要實現上述效果，我們只需要：
p {
display: inline;
box-decoration-break: clone;
background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}
無論文本內容或者容器寬度如何變化，都能完美適配：
CodePen Demo -- box-decoration-break 每行文字帶特定邊框
box-decoration-break 結合過渡動畫
結合上面的內容，我們還可以考慮將 box-decoration-break 與過渡效果或者動畫效果結合起來。
譬如，我們希望當我們 hover 文字內容的時候，一些重點需要展示的文欄位落能夠被強調展示，可能是這樣：
CodePen Demo -- box-decoration-break 過渡動畫
又或者是這樣：
CodePen Demo -- box-decoration-break 結合過渡動畫
你可以嘗試點進 Demo ，然後去掉 box-decoration-break: clone ，會發現效果大打折扣。
相容性
額，按照慣例相容性應該都不太行。並且 MDN 也給出了這樣的提示：
This is an experimental technology. Check the Browser compatibility table carefully before using this in production.
看看 Can I Use，其實還好，除了 IE 系列全軍覆沒，所以可以考慮應用在移動端。即便這個屬性不相容，降級展示對頁面不會造成什麼影響：
另外，本文中，給出的代碼都是 box-decoration-break: clone ，CodePen 自帶了 autoprefixer 實際中可能需要寫成：
{
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
最後
國內看到了大漠老師和張鑫旭大大都已經寫過這個屬性，大家可以對比著看看，加深理解：
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
好了，本文到此結束，希望對你有幫助 :)
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
