有趣的 box-decoration-break

這兩天接觸到一個頗有意思的 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/CSS3 box-decoration-break屬性簡介
• 初探box-decoration-break

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

好了，本文到此結束，但願對你有幫助 :)

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。