CSS 遮罩 - mask-border-width 属性

CSS 属性 mask-border-width 设置元素的 遮罩边框 宽度。

mask-border-width CSS 属性可以指定一个、两个、三个或四个值。应用值时需考虑以下规则

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

可能的值

CSS 属性 mask-border-width 可以具有以下值之一

<length-percentage>：遮罩边框的宽度指定为<length> 或<percentage> 值，其中百分比相对于水平偏移量情况下边框区域的宽度，以及垂直偏移量情况下边框区域的高度。负值无效。
<number>：遮罩边框的宽度指定为相应border-width 的倍数。负值无效。
auto：相应mask-border-slice 的固有宽度或高度设置为遮罩边框的宽度。如果图像没有固有尺寸，则使用相应的border-width。

应用于

所有 HTML 元素。在 SVG 的情况下，它应用于容器元素，但不包括<defs> 元素和所有图形元素

语法

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

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

CSS mask-border-width - 一个值

以下示例演示了 CSS 属性 mask-border-width 的用法，其中将图像作为遮罩边框传递，并指定了一个宽度值，该值设置所有四个边的遮罩边框宽度。

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

CSS mask-border-width - 两个值

以下示例演示了 CSS 属性 mask-border-width 的用法，其中将图像作为遮罩边框传递，并为宽度传递了两个值，这将顶部和底部的宽度设置为 10px，左侧和右侧的宽度设置为 20px。

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

CSS mask-border-width - 三个值

以下示例演示了 CSS 属性 mask-border-width 的用法，其中将图像作为遮罩边框传递，并为宽度传递了三个值，这将顶部的宽度设置为 10%，左侧和右侧的宽度设置为 20px，底部的宽度设置为 10%。

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

CSS mask-border-width - 四个值

以下示例演示了 CSS 属性 mask-border-width 的用法，其中将图像作为遮罩边框传递，并为宽度传递了四个值，这将所有边的宽度设置为 10px。

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

打印页面