CSS保健室｜box-decoration-break

box-decoration-break

CSS 界的海星，屬於能自體再生的動物，如果其中一隻觸手被切斷，改個原始碼，過一段時間便能長回來，不信你去問問派大星。

（ 圖片來源 ）

box-decoration-break 屬性可以指定元素片段在跨行、跨列或跨頁（ 如打印 ）時候的樣式渲染表現，但只能影響部分 CSS 的渲染，如下：

• background
• border
• border-image
• box-shadow
• border-radius
• clip-path
• margin
• padding

IE 不支持， Firefox 全數支持， Opera 、 Safari 和 Chrome 支持替代的 -webkit-box-decoration-break 規則。

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

使用 box-decoration-break 來處理元素片段樣式時，該元素必須是 inline 元素（ 或者 display:inline 的其它元素 ），而且該元素不能使用取值為其它值的 display （ 比如 block 、 inline-block 、 flex 等），也不能運用於 float 和 position （ 取值為 absolute 和 fixed ）。

HTML

<div class="box">
    <span class="text">文字</span>
</div>

CSS

.box { width: 200px; color: #fff; }
.text {
    border-radius: 30px;
    background-color: chocolate;
    -webkit-box-decoration-break: slice | clone;
    box-decoration-break: slice | clone;
 }

屬性	說明	範例
slice	默認值。表示各個盒子斷開的部分如同切割開一般。 （ 圖片來源 ）	（ 可以看到換行的位置是直直切割，圓角在最開始和最後面 ）
clone	表示斷開的各個盒子樣式獨自渲染。 （ 圖片來源 ）	（ 可以看到斷開的兩個內聯盒子兩端都是圓角 ）

毛筆刷效果

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

螢光筆效果

p {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

參考資料

1. CSS/CSS3 box-decoration-break属性简介
2. 有趣的 box-decoration-break