diff options
Diffstat (limited to 'files/zh-cn/web/css/box-decoration-break')
| -rw-r--r-- | files/zh-cn/web/css/box-decoration-break/index.html | 149 |
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; +} + +... +<span class="example">The<br>quick<br>orange fox</span></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> |