path: root/files/zh-cn/web/css/box-decoration-break/index.html

---
title: box-decoration-break
slug: Web/CSS/box-decoration-break
translation_of: Web/CSS/box-decoration-break
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p><strong><code>box-decoration-break</code></strong> 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。</p>

<div>{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}</div>



<p>指定的值将影响元素以下属性的表现：</p>

<ul>
 <li>{{Cssxref("background")}}</li>
 <li>{{Cssxref("border")}}</li>
 <li>{{Cssxref("border-image")}}</li>
 <li>{{Cssxref("box-shadow")}}</li>
 <li>{{Cssxref("clip-path")}}</li>
 <li>{{Cssxref("margin")}}</li>
 <li>{{Cssxref("padding")}}</li>
</ul>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;

/* Global values */
box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: unset;
</pre>

<p><code>box-decoration-break</code> 的合法值包括下列几种：</p>

<h3 id="值">值</h3>

<dl>
 <dt><code>slice</code></dt>
 <dd>元素被按照盒子被切割前的原始样式渲染，之后，针对每个行/列/页面将此假设框渲染成片段。请注意，假设框对于每个片段可以是不同的，因为如果中断发生在行内方向，则它使用自己的高度，如果中断发生在块方向，则它使用自己的宽度。有关详细信息，请参阅CSS规范。</dd>
 <dt><code>clone</code></dt>
 <dd>每个框片段与指定的边框、填充和边距独立呈现。The {{ Cssxref("border-radius") }}、{{ Cssxref("border-image") }}、 {{ Cssxref("box-shadow") }}独立地应用于每个片段,每个片段的背景也是独立绘制的, 这意味着使用 {{ Cssxref("background-repeat") }}<code>: no-repeat</code> 的背景图片仍然可能重复多次.</dd>
</dl>

<h3 id="正式语法">正式语法</h3>

{{csssyntax}}

<h2 id="示例">示例</h2>

<h3 id="行内盒子片段">行内盒子片段</h3>

<p>包含换行符的内联元素：</p>

<pre class="brush:css notranslate">.example {
  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;
  padding: 0em 1em;
  border-radius: 16px;
  border-style: solid;
  margin-left: 10px;
  font: 24px sans-serif;
  line-height: 2;
}

...
&lt;span class="example"&gt;The&lt;br&gt;quick&lt;br&gt;orange fox&lt;/span&gt;</pre>

<p>... 效果:</p>

<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p>

<p>添加 <code>box-decoration-break: clone</code> 样式之后:</p>

<pre class="brush:css notranslate">-webkit-box-decoration-break: clone;
box-decoration-break: clone;
</pre>

<p>... 效果:</p>

<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p>

<p>你可以<a href="https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html"> 尝试这两个例子</a>.</p>

<p>下面是一个使用大圆角值的内联元素示例。第二个“iM”在“i”和“M”之间有一个分界线，作为比较，第一个“iM”是没有换行符的。请注意，如果您将两个片段的呈现水平地排列在一起，就会导致非分段呈现。</p>

<p><img alt="A screenshot of the rendering of the second inline element example." src="https://mdn.mozillademos.org/files/8189/box-decoration-break-slice-inline-2.png" style="height: 184px; width: 108px;"></p>

<p>你可以 <a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">尝试这个例子</a>.</p>

<h3 id="块状盒子片段">块状盒子片段</h3>

<p>与上述样式相似且没有碎片的块元素的表现：</p>

<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p>

<p>将上述块分割成三列，表现为：</p>

<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p>

<p>注意，垂直堆叠这些部分将导致非碎片渲染。</p>

<p>现在，同样的例子，但使用 <code>box-decoration-break</code> 的效果：</p>

<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p>

<p>请注意，每个片段都具有相同的 border， box-shadow 和 background。</p>

<p>你可以 <a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">尝试这个例子</a>。</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}</td>
   <td>{{ Spec2('CSS3 Fragmentation') }}</td>
   <td>初步定义</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>



<p>{{Compat("css.properties.box-decoration-break")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{cssxref("break-after")}}, {{cssxref("break-before")}}, {{cssxref("break-inside")}}</li>
</ul>