CSS 遮罩 - mask-border-outset 属性

CSS 属性 `mask-border-outset` 指定元素的`遮罩边框` 从边框盒延伸的距离。

CSS 属性 `mask-border-outset` 可以指定一个、两个、三个或四个值。每个值都是一个 `<length>` 或 `<number>`。不允许使用负值，负值将被视为无效。应用值时，请考虑以下规则：

如果指定`一个`值，则相同的偏移量将应用于所有`四个边`。
如果指定`两个`值，则第一个偏移量将应用于`顶部和底部`，第二个偏移量将应用于`左侧和右侧`。
如果指定`三个`值，则第一个偏移量将应用于`顶部`，第二个偏移量将应用于`左侧和右侧`，第三个值将应用于`底部`。
如果指定`四个`值，则偏移量将按指定的顺序（顺时针方向）应用于`顶部、右侧、底部`和`左侧`。

可能的值

CSS 属性 `mask-border-outset` 可以具有以下值之一：

`<length>`: 遮罩边框偏移量以长度单位指定。
`<number>`: 遮罩边框偏移量指定为对应`border-width` 的倍数。

应用于

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

语法

mask-border-outset = [ <length> | <number> ] {1,4}

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

CSS mask-border-outset - 基本示例

以下示例演示了 CSS 属性 `mask-border-outset` 的用法，其中一个图像作为遮罩边框传递，并指定了一个偏移值，该值会在图像和遮罩边框之间添加一个距离。

<html>
<head>
<style>
   * {
      box-sizing: border-box;
   }

   .with-mask{
      -webkit-mask-box-image-source: url("images/border.png");
      -webkit-mask-box-image-slice: 80;
      -webkit-mask-box-image-width: 120px;  
      -webkit-mask-box-image-repeat: round;
      -webkit-mask-box-image-outset: 3.5rem;

      -webkit-mask-border-source: url("images/border.png");
      -webkit-mask-border-slice: 80;
      -webkit-mask-border-width: 120px;
      -webkit-mask-border-outset: 3.5rem; 
      -webkit-mask-border-repeat: round;
      -webkit-mask-border-mode: alpha;
   }
</style>
</head>
<body>
   <h1>The mask-border-outset Property</h1>

   <h3>With mask-border-outset</h3>
   <div class="with-mask">
   <img src="images/scenery.jpg" alt="mask border image" width="300" height="200">
   </div>
</body>
</html>

打印页面