有趣的 box-decoration-break

這兩天接觸到一個很有意思的 CSS 屬性 -- <code>box-decoration-break</code>。下面就一起去一探究竟。

因為 MDN 上關于這個屬性，沒有中文文檔，是以一直在想一個合理貼切的中文翻譯。直譯一下：

box -- 盒，可以了解為元素盒模型

decoration -- 裝飾，了解為元素樣式

break -- 斷行，參考<code>word-break</code> ，了解為斷行時候的表現

那麼，這個屬性可以先了解為，元素在發生斷行時其樣式的表現形式。

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 屬性規定了一個元素片段在發生折行/斷行時，應該如何被渲染。

可選取值隻有兩個：

　

這個屬性通常作用于内聯元素。假設我們存在如下結構，并且給它添加一個邊框：

嗯，效果如下，平平無奇：

好，接下來就是 break，我們把上面一行的文字斷行，樣式不變：

得到如下結果：

O，可以看到，文字換行的同時，邊框也随之變化，頭尾兩行都有 3 邊邊框，中間兩行隻有上下兩邊邊框。如果将 4 行合起來，可以拼成圖一，這個是正常的展示效果。

接下來，我們加上本文的主角 <code>box-decoration-break: clone</code>：

生效後，我們将會得到這樣的結果：

看到這裡，我們已經可以大概了解這個屬性的作用了：

使用了 <code>box-decoration-break: clone</code> 的内聯元素，如果存在折行顯示，那麼每一行都将擁有原本單行的所有完整樣式。

再看個例子加深下了解，存在如下結構，其使用了 <code>box-decoration-break: clone</code> 前後兩種效果：

CodePen Demo -- box-decoration-break

當然，使用了 <code>box-decoration-break: clone</code> 的元素并非對每一個樣式都會生效，隻會作用于下列樣式：

background

border

border-image

box-shadow

clip-path

margin

padding

Syntax

接下來看看，有沒有什麼靠譜的實際應用場景。

會有這樣的場景，我們希望對一個多行文本中的特定一段文本進行着重展示。這個時候，我們可以通過 <code>&lt;p&gt;</code> 嵌套 <code>&lt;span&gt;</code> ，對 <code>&lt;span&gt;</code> 包裹的文字進行一些特定的展示。

譬如我們有這樣一段文案：

其中，我們将需要強調的内容通過 <code>&lt;span&gt;</code> 标簽包裹起來，賦予特定樣式并且加上 <code>box-decoration-break: clone</code>，這樣，無論強調文案是否換行，每一處的強調背景都是一緻的：

得到如下效果：

如果不加 <code>box-decoration-break: clone</code> 呢？那麼如果存在換行，效果會大打折扣：

CodePen Demo -- text-decoration-break 文本選中效果

又會有這樣的場景，我們希望每一行文案都帶有特定的邊框樣式，像這樣：

怎麼實作呢？也許可以每一行都是一個 <code>&lt;p&gt;</code>，每一行 <code>&lt;p&gt;</code> 設定上述樣式。但是如果文本内容不确定，容器的寬度也不确定呢？

這種場景，使用 <code>box-decoration-break</code> 也非常便捷。當然這裡有個小技巧，正常而言， <code>box-decoration-break: clone</code> 隻對 <code>inline</code> 元素生效，如果我們的文案像是這樣包裹在 <code>&lt;p&gt;</code> 标簽内：

要使 <code>box-decoration-break: clone</code> 對 <code>&lt;p&gt;</code> 生效，可以通過設定 <code>&lt;p&gt;</code> 的 <code>display: inline</code> 來實作。如此一來，要實作上述效果，我們隻需要：

無論文本内容或者容器寬度如何變化，都能完美适配：

CodePen Demo -- box-decoration-break 每行文字帶特定邊框

結合上面的内容，我們還可以考慮将 <code>box-decoration-break</code> 與過渡效果或者動畫效果結合起來。

譬如，我們希望當我們 hover 文字内容的時候，一些重點需要展示的文字段落能夠被強調展示，可能是這樣：

CodePen Demo -- box-decoration-break 過渡動畫

又或者是這樣：

CodePen Demo -- box-decoration-break 結合過渡動畫

你可以嘗試點進 Demo ，然後去掉 <code>box-decoration-break: clone</code> ，會發現效果大打折扣。

額，按照慣例相容性應該都不太行。并且 MDN 也給出了這樣的提示：

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.

看看 Can I Use，其實還好，除了 IE 系列全軍覆沒，是以可以考慮應用在移動端。即便這個屬性不相容，降級展示對頁面不會造成什麼影響：

另外，本文中，給出的代碼都是 <code>box-decoration-break: clone</code> ，CodePen 自帶了 <code>autoprefixer</code> 實際中可能需要寫成：

　　

國内看到了大漠老師和張鑫旭大大都已經寫過這個屬性，大家可以對比着看看，加深了解：

CSS/CSS3 box-decoration-break屬性簡介

初探box-decoration-break

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

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

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