path: root/files/zh-cn/web/css/mask-border-slice/index.html

---
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>