CSS保健室｜box-decoration-break

box-decoration-break

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

cover

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%);
}