--- 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><number-percentage></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("<number>")}}</dt> <dd>表示光栅图像的边缘偏移量(<em>像素)</em>和矢量图像的<em>坐标</em>。对于矢量图像,数字是相对于元素的大小,而不是源图像的大小,因此在这些情况下,通常最好使用百分比。</dd> <dt>{{cssxref("<percentage>")}}</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> {{csssyntax}} <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>