initial commit

1 files changed, 126 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/mask-border-slice/index.html b/files/zh-cn/web/css/mask-border-slice/index.html
new file mode 100644
index 0000000000..f183bc1787
--- /dev/null
+++ b/files/zh-cn/web/css/mask-border-slice/index.html
@@ -0,0 +1,126 @@
+---
+title: mask-border-slice
+slug: Web/CSS/mask-border-slice
+translation_of: Web/CSS/mask-border-slice
+---
+<div>{{CSSRef}}</div>
+
+<p>的<a href="/en-US/docs/Web/CSS">CSS</a>属性除以{{cssxref("掩模边界源")}}成区域的图像集合。这些区域用于形成元素的<a href="/en-US/docs/Web/CSS/mask-border">遮罩边框</a>的组成部分。<strong><code>mask-border-slice</code></strong></p>
+
+<h2 id="句法">句法</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* All sides */
+mask-border-slice: 30%;
+
+/* vertical | horizontal */
+mask-border-slice: 10% 30%;
+
+/* top | horizontal | bottom */
+mask-border-slice: 30 30% 45;
+
+/* top | right | bottom | left */
+mask-border-slice: 7 12 14 5;
+
+/* Using the `fill` keyword */
+mask-border-slice: 10% fill 7 12;
+
+/* Global values */
+mask-border-slice: inherit;
+mask-border-slice: initial;
+mask-border-slice: unset;
+</pre>
+
+<p>该<code>mask-border-slice</code>属性可使用一至四个指定<code>&lt;number-percentage&gt;</code>值来表示每个图像切片的位置。负值无效；大于其相应尺寸的值被钳制为<code>100%</code>。</p>
+
+<ul>
+ <li>当<strong>一个</strong>被指定的位置，它在从它们各自的两侧是相同的距离创建所有四片。</li>
+ <li>当<strong>2点</strong>被指定的位置，所述第一值创建一个从测量的层<strong>的顶部和底部</strong>，所述第二创建从所测量的片<strong>左右</strong>。</li>
+ <li>当指定了<strong>三个</strong>位置时，第一个值创建从<strong>顶部开始</strong>测量的切片，第二个值创建从<strong>左侧和右侧开始</strong>测量的切片，第三个值创建从<strong>底部开始</strong>测量的切片。</li>
+ <li>当指定了<strong>四个</strong>位置时，它们创建从<strong>上</strong>，<strong>右</strong>，<strong>下</strong>和<strong>左</strong>按该顺序（顺时针）测量的切片。</li>
+</ul>
+
+<p><code>fill</code>如果使用了可选值，则可以将其放置在声明中的任何位置。</p>
+
+<h3 id="价值观">价值观</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>表示光栅图像的边缘偏移量（<em>像素）</em>和矢量图像的<em>坐标</em>。对于矢量图像，数字是相对于元素的大小，而不是源图像的大小，因此在这些情况下，通常最好使用百分比。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>将边缘偏移量表示为源图像尺寸的百分比：水平偏移量的图像宽度，垂直偏移量的高度。</dd>
+ <dt><code>fill</code></dt>
+ <dd>保留中间图像区域。其宽度和高度的大小分别匹配顶部和左侧图像区域。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>切片过程总共创建了九个区域：四个角，四个边缘和一个中间区域。四个切片线，从其各自的侧面设置了给定的距离，以控制区域的大小。</p>
+
+<p><a href="/files/3814/border-image-slice.png"><img alt="由border-image或border-image-slice属性定义的九个区域" src="/files/3814/border-image-slice.png" style="margin: 1px; padding: 1em; width: 460px;"></a></p>
+
+<p>上图说明了每个区域的位置。</p>
+
+<ul>
+ <li>1-4区是<a id="corner-regions" name="corner-regions">拐角区域</a>。每个图像都使用一次以形成最终边框图像的角。</li>
+ <li>5-8区是<a id="edge-regions" name="edge-regions">边缘区域</a>。在最终的边框图像中对这些元素进行<a href="/en-US/docs/Web/CSS/mask-border-repeat">重复，缩放或其他方式的修改</a>，以匹配元素的尺寸。</li>
+ <li>9区是<a id="middle-region" name="middle-region">中间区域</a>。默认情况下将其丢弃，但如果<code>fill</code>设置了关键字，则它会用作背景图像。</li>
+</ul>
+
+<p>{{cssxref("mask-border-repeat")}}，{{cssxref("mask-border-width")}}和{{cssxref("mask-border-outset")}}属性决定了这些区域用于形成最终的蒙版边框。</p>
+
+<h2 id="正式定义">正式定义</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="形式语法">形式语法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="基本用法">基本用法</h3>
+
+<p>该属性似乎在任何地方都不受支持。最终开始受支持时，它将用于定义从源图像获取的切片的大小，并用于创建边框蒙版。</p>
+
+<pre class="brush: css notranslate">mask-border-slice: 30 fill;</pre>
+
+<p>基于Chromium的浏览器支持此属性的过时版本<code>mask-box-image-slice</code>-带前缀：</p>
+
+<pre class="brush: css notranslate">-webkit-mask-box-image-slice: 30 fill;</pre>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>：该<code><a href="/en-US/docs/Web/CSS/mask-border">mask-border</a></code>页面提供了一个有效的示例（使用Chromium支持的过期前缀边框蒙版属性），因此您可以大致了解效果。</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>：如果希望元素的内容可见，则必须包含fill关键字。</p>
+</div>
+
+<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("CSS Masks","＃propdef-mask-border-slice","mask-border-slice")}}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>待定</p>
+
+<h2 id="也可以看看">也可以看看</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases">1到4值语法的图解说明</a></li>
+</ul>