CSS box-decoration-break与columns布局样式渲染实例页面

展示

去论坛 »

默认

CSS box-decoration-break属性可以指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现。

box-decoration-break:clone

CSS box-decoration-break属性可以指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现。

//zxx: Firefox浏览器下表现符合预期，Chrome不支持块级元素clone表现

代码

HTML：

<h4>默认</h4>
<div class="container">
    <p>CSS box-decoration-break属性...</p>
</div>
<h4>box-decoration-break:clone</h4>
<div class="container">
    <p class="clone">CSS box-decoration-break属性...</p>
</div>

CSS：

.container {
    width: 300px;
    columns: 2;
}
.container p {
    margin: 0;
    border: solid deepskyblue;
}
.clone {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}