initial commit

1 files changed, 149 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/box-decoration-break/index.html b/files/zh-cn/web/css/box-decoration-break/index.html
new file mode 100644
index 0000000000..e35ab5dd82
--- /dev/null
+++ b/files/zh-cn/web/css/box-decoration-break/index.html
@@ -0,0 +1,149 @@
+---
+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>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<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>