深入探究css box-decoration-break属性

css</a>;toolbar:false;">{
    box-decoration-break: slice;   // 默认取值
    box-decoration-break: clone;
}

<span>ABCDEFGHIJKLMN</span>

span {
    border: 2px solid #999;
}

<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}

<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>

<p>
The <span>box-decoration-break</span> CSS property specifies how an element&#39;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>

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

<p>
The box-decoration-break CSS property specifies how an element&#39;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>

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

{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}