box-decoration-break
试一试
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
<section id="default-example">
<div id="example-container">
<span id="example-element">This text breaks across multiple lines.</span>
</div>
</section>
#example-container {
width: 14rem;
}
#example-element {
background: linear-gradient(to bottom right, #6f6f6f, black);
color: white;
box-shadow:
8px 8px 10px 0 #ff1492,
-5px -5px 5px 0 blue,
5px 5px 15px 0 yellow;
padding: 0 1em;
border-radius: 16px;
border-style: solid;
margin-left: 10px;
font: 24px sans-serif;
line-height: 2;
}
指定的值将影响以下属性的显示：
语法
css
/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;
/* Global values */
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;
box-decoration-break 属性被指定为下面列出的关键字值之一。
值
slice-
元素最初渲染时，就好像它的框没有被碎片化一样，然后这个假想框的渲染被切片成每行/列/页的片段。请注意，每个片段的假想框可能不同，因为如果中断发生在行内方向，它会使用自己的高度；如果中断发生在块方向，它会使用自己的宽度。有关详细信息，请参阅 CSS 规范。
clone-
每个框片段独立渲染，并带有指定的边框、内边距和外边距包裹每个片段。
border-radius、border-image和box-shadow独立应用于每个片段。背景也为每个片段独立绘制，这意味着带有background-repeat: no-repeat的背景图像仍可能重复多次。
正式定义
正式语法
box-decoration-break =
slice |
clone
示例
行内框片段
带有框装饰的行内元素在包含换行符时，由于初始 slice 值，可能会出现意外的外观。以下示例展示了将 box-decoration-break: clone 添加到包含 <br> 标签的 <span> 的效果：
css
span {
background: linear-gradient(to bottom right, yellow, green);
box-shadow:
8px 8px 10px 0px deeppink,
-5px -5px 5px 0px blue,
5px 5px 15px 0px yellow;
}
#clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
html
<p>
<span>The<br />quick<br />orange fox</span>
</p>
<p>
<span id="clone">The<br />quick<br />orange fox</span>
</p>
块框片段
以下示例展示了带有框装饰的块级元素在多列布局中包含换行符时的外观。请注意，如果垂直堆叠，box-decoration-break: slice 的结果将等同于第一个 <div>。
css
span {
display: block;
background: linear-gradient(to bottom right, yellow, green);
box-shadow:
inset 8px 8px 10px 0px deeppink,
inset -5px -5px 5px 0px blue,
inset 5px 5px 15px 0px yellow;
}
#base {
width: 33%;
}
.columns {
columns: 3;
}
.clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
html
<div id="base">
<span>The<br />quick<br />orange fox</span>
</div>
<br />
<h2>'box-decoration-break: slice'</h2>
<div class="columns">
<span>The<br />quick<br />orange fox</span>
</div>
<h2>'box-decoration-break: clone'</h2>
<div class="columns">
<span class="clone">The<br />quick<br />orange fox</span>
</div>
规范
| 规范 |
|---|
| CSS Fragmentation Module Level 3 # break-decoration |
浏览器兼容性
加载中…