mask-border-slice

**mask-border-slice** CSS 属性将 mask-border-source 设置的图像集划分为区域。这些区域用于形成元素的 蒙版边框的组件。

语法

css
/* All sides */
mask-border-slice: 30%;

/* top and bottom | left and right */
mask-border-slice: 10% 30%;

/* top | left and right | 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: revert;
mask-border-slice: revert-layer;
mask-border-slice: unset;

mask-border-slice 属性可以使用一个到四个 <number-percentage> 值来指定，以表示每个图像切片的位。负值无效；大于其对应维度的值将限制为 100%。

  • 当指定 **一个** 位置时，它会在距其各自侧面的相同距离处创建所有四个切片。
  • 当指定 **两个** 位置时，第一个值创建从 **顶部和底部** 测量的切片，第二个值创建从 **左侧和右侧** 测量的切片。
  • 当指定 **三个** 位置时，第一个值创建从 **顶部** 测量的切片，第二个值创建从 **左侧和右侧** 测量的切片，第三个值创建从 **底部** 测量的切片。
  • 当指定 **四个** 位置时，它们按顺序（顺时针）创建从 **顶部**、**右侧**、**底部** 和 **左侧** 测量的切片。

如果使用，可选的 fill 值可以放置在声明中的任何位置。

值

<number>

表示光栅图像的边缘偏移量（以 像素 为单位）和矢量图像的边缘偏移量（以 坐标 为单位）。对于矢量图像，该数字相对于元素的大小，而不是源图像的大小，因此在这些情况下，百分比通常更可取。

<percentage>

表示作为源图像大小的百分比的边缘偏移量：水平偏移量的图像宽度，垂直偏移量的高度。

fill

保留中间图像区域。其宽度和高度分别调整为与顶部和左侧图像区域匹配。

描述

切片过程总共创建九个区域：四个角、四个边和一个中间区域。四条切片线，设置距其各自侧面的给定距离，控制区域的大小。

The nine regions defined by the border-image or border-image-slice properties

上图说明了每个区域的位置。

  • 区域 1-4 是角区域。每个区域仅使用一次来形成最终边框图像的角。
  • 区域 5-8 是边缘区域。在最终的边框图像中，这些区域会被 重复、缩放或以其他方式修改 以匹配元素的尺寸。
  • 区域 9 是中间区域。默认情况下，它会被丢弃，但如果设置了关键字 fill，则会像背景图像一样使用。

mask-border-repeat、mask-border-width 和 mask-border-outset 属性确定如何使用这些区域来形成最终的蒙版边框。

正式定义

初始值0
应用于所有元素；在 SVG 中，它应用于容器元素，但不包括 <defs> 元素和所有图形元素
继承否
百分比指的是蒙版边框图像的大小
计算值如指定
动画类型离散

正式语法

mask-border-slice = 
  [ <number> | <percentage> ]{1,4} fill?

示例

基本用法

此属性似乎尚未在任何地方得到支持。当它最终开始得到支持时，它将用于定义从源图像中获取的切片的大小，并用于创建边框蒙版。

css
mask-border-slice: 30 fill;

基于 Chromium 的浏览器支持此属性的过时版本 - mask-box-image-slice - 并带有前缀

css
-webkit-mask-box-image-slice: 30 fill;

注意：mask-border 页面提供了一个工作示例（使用 Chromium 中支持的已过时的带前缀的边框遮罩属性），因此您可以了解其效果。

注意：如果希望元素的内容可见，则需要包含 fill 关键字。

规范

规范
CSS 遮罩模块级别 1
# the-mask-border-slice

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅