CSS 遮罩 - mask-border 属性

mask-border CSS 属性帮助你创建沿着元素边框边缘的遮罩。

CSS 属性mask-border 是一个简写属性，对应于下面描述的多个详细属性。

可能的取值

CSS 属性mask-border 可以包含以下值之一：

<'mask-border-source'>: 确定源图像。详情请参考 mask-border-source。
<'mask-border-slice'>: 指定将源图像切分为不同区域所需的尺寸。最多可以指定四个值。详情请参考 mask-border-slice。
<'mask-border-width'>: 确定边框遮罩的宽度。最多可以指定四个值。详情请参考 mask-border-width。
<'mask-border-outset'>: 确定边框遮罩与元素外边缘之间的距离。最多可以指定四个值。详情请参考 mask-border-outset。
<'mask-border-repeat'>: 指定调整源图像边缘以适应边框遮罩尺寸的方式。最多可以指定两个值。详情请参考 mask-border-repeat。
<'mask-border-mode'>: 确定源图像是否应被视为亮度遮罩或 Alpha 遮罩。最多可以指定四个值。详情请参考 mask-border-mode。

应用于

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

语法

mask-border = <'mask-border-source'> || 
    <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? ||
    <'mask-border-repeat'> || 
    <'mask-border-mode'>

CSS mask-border - 基本示例

以下示例演示了 CSS 属性mask-border 的用法，其中一个图像作为遮罩源图像传递，其他详细属性值也已传递。

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

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

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

CSS mask-border - 相关属性

下表列出了传递给mask-border 属性的各种详细属性。

属性	描述
mask-border-mode	确定源图像是否应被视为亮度遮罩或 Alpha 遮罩。
mask-border-outset	确定边框遮罩与元素外边缘之间的距离。
mask-border-repeat	指定调整源图像边缘以适应边框遮罩尺寸的方式。
mask-border-slice	指定将源图像切分为不同区域所需的尺寸。
mask-border-source	确定源图像。
mask-border-width	确定边框遮罩的宽度。

打印页面