CSS 遮罩 - mask-border-slice 属性

CSS 属性 `mask-border-slice` 将源图像划分为多个区域。源图像的这些区域划分对于形成`遮罩边框` 的组件非常有用。

`mask-border-slice` CSS 属性可以指定一个到四个值。每个值都是一个`<number-percentage>`。不允许负值，负值被视为无效值，大于其对应维度的值将被限制为`100%`。应用值时，请考虑以下规则：

如果指定`一个`值/位置，则会创建所有四个切片，它们与其对应的边之间的距离相同。
如果指定`两个`值/位置，则第一个值创建来自`顶部和底部`的切片，第二个值分别创建来自`左侧和右侧`的切片。
如果指定`三个`值/位置，则第一个值创建来自`顶部`的切片，第二个值创建来自`左侧和右侧`的切片，第三个值创建来自`底部`的切片。
如果指定`四个`值/位置，它们将按指定的顺序（顺时针方向）分别创建来自`顶部、右侧、底部`和`左侧`的切片。

注意：值`fill` 是可选的，可以在声明中的任何位置使用。

切片过程总共会创建`九`个区域，即四个`角`、四个`边`和一个`中间`区域。四条切片线负责设置与其对应边之间的给定距离，并控制区域的大小。请参考下图了解每个区域的位置。

上图显示了各个区域。

`区域 1-4` 是`角`区域。这些区域中的每一个都被使用一次来形成最终边框图像的角。
`区域 5-8` 是`边`区域。这些区域中的每一个在最终边框图像中都会被重复、缩放或修改，以匹配元素的尺寸。
`区域 9` 是`中间`区域。默认情况下，它会被丢弃，但当应用关键字`fill` 时，它用于设置背景图像。

属性`mask-border-repeat、mask-border-width`和`mask-border-outset` 决定了如何应用这些区域来形成最终的遮罩边框。

可能的值

CSS 属性`mask-border-slice` 可以具有以下值：

`<number>`：对于光栅图像，边缘偏移量以像素表示；对于矢量图像，它是坐标。对于矢量图像，该数字相对于元素的大小，而不是源图像的大小。因此，在这种情况下，最好使用百分比值。
`<percentage>`：源图像大小的边缘偏移量以百分比值表示；其中图像的宽度用于水平偏移量，图像的高度用于垂直偏移量。
`fill`：保留中间区域。图像的宽度和高度调整为分别匹配顶部和左侧图像区域。

应用于

所有 HTML 元素。对于 SVG，它应用于容器元素，不包括`<defs>` 元素和所有图形元素。

语法

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

注意：基于 Chromium 的浏览器支持此属性的旧版本`mask-box-image-slice`，带有前缀，即`-webkit`。
-webkit-mask-border-slice = 20 fill;

CSS mask-border-slice - 基本示例

以下示例演示了 CSS 属性`mask-border-slice` 的用法，其中一个图像作为遮罩边框传递，并根据传递的数字百分比值进行切片。

<html>
<head>
<style>
   .with-mask {
      -webkit-mask-box-image: url("images/logo.png")
        30 10% /          /* slice */
        10px /             /* width */
        2px                /* outset */
        space;            /* repeat */
      
   
      mask-border: url("images/logo.png")
        30 10% /        /* slice */
        10px /           /* width */
        2px              /* outset */
        space;          /* repeat */
  }
</style>
</head>
<body>
   <h1>The mask-border-slice Property</h1>

   <h3>With mask-border-slice</h3>
   <div class="with-mask">
   <img src="images/orange-flower.jpg" alt="mask border image" width="300" height="200">
   </div>

   <h3>Without mask-border-slice</h3>
   <img src="images/orange-flower.jpg" alt="mask border image" width="300" height="200">
</body>
</html>

打印页面