mask-border

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

DigitalOcean 为您的旅程的每个阶段提供云产品。从 价值 200 美元的免费信用开始!

mask-border CSS 属性将边框图像设置为元素的遮罩边框区域。它是设置 mask-border-sourcemask-border-slicemask-border-widthmask-border-outsetmask-border-repeatmask-border-mode 属性的简写形式,在一个声明中。

.element {
  mask-border: url('mask.png') 100 / 50px round;
}

下面您可以看到用作元素遮罩边框的源图像

Result of the applying a mask-border to an element.

语法

mask-border 唯一必需的属性值是 mask-border-source,它指向用作边框的图像文件。如果未指定其他属性,则默认为其初始值。

mask-border: <'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>
  • 初始值: 长属性的初始值系列(见单个属性)
  • 应用于: 所有元素。在 SVG 中,它应用于容器元素(不包括 <svg> 元素),所有图形元素和 <use> 元素
  • 继承:
  • 动画类型: 离散

/* source */
mask-border: url('mask.png');
/* source | slice | repeat */
mask-border: url('mask.webp') 10 space;
/* source | slice | width */
mask-border: url('mask.png') 15 / 5px;
/* source | slice | width | outset | repeat | mode */            
mask-border: url('mask.png') 20 / 25px / 5px round alpha;
/* All values */
mask-border: url(img.png) 20% 30% 25px 40 / 2em 3em 4em 1.5em / 10px 20px 15px 30px space;

/* Global values */
mask-border: inherit;
mask-border: initial;
mask-border: unset;
  • initial: 应用长属性的初始值系列。
  • inherit: 采用父元素的 mask-border 值。
  • unset: 从元素中删除当前 mask-border

应用遮罩边框

遮罩边框的整个过程按以下步骤进行

  1. 使用 mask-border-source 属性指定遮罩边框图像的图像文件。
  2. 使用 mask-border-slice 属性将图像切分成九个图像。
  3. 使用 mask-border-widthmask-border-repeat 属性指定的数值对九个图像进行缩放。
  4. 图像缩放后,使用 mask-border-repeat 属性将其定位并平铺以填充其各自的区域。

现在让我们深入研究这些步骤及其对应的属性。

mask-border-source

mask-border-source 属性设置用作遮罩边框的图像文件。空图像、无法下载的图像、不存在的图像或无法显示的图像将被忽略,不会遮罩元素。

语法

mask-border-source: none | <image>
  • 初始值: none
  • 应用于: 所有元素。在 SVG 中,它应用于容器元素(不包括 <svg> 元素),所有图形元素和 <use> 元素
  • 继承:
  • 动画类型: 离散

/* Keyword value */
mask-border-source: none;

/* <image> values */
mask-border-source: url(img.webp);
mask-border-source: linear-gradient(90deg, #f00, #00f);
mask-border-source: radial-gradient(#e66465, #9198e5);

mask-border-source 属性设置为 none 以外的任何值都会导致创建 堆叠上下文,就像 CSS opacity 一样。元素的所有后代将作为一组一起渲染,并将遮罩应用于整个组。

mask-border-mode

mask-border-mode 属性指定 mask-border-source 定义的源图像是否被视为 alpha 遮罩或亮度遮罩。

您可以在年鉴条目中阅读有关 alpha 和亮度遮罩 的更多信息 mask-mode

语法

该属性接受以下关键字中的一个

mask-border-mode: alpha | luminance
  • 初始值: alpha
  • 应用于: 所有元素。在 SVG 中,它应用于容器元素(不包括 <svg> 元素),所有图形元素和 <use> 元素
  • 继承:
  • 动画类型: 离散

/* Keyword values */
mask-border-mode: luminance;
mask-border-mode: alpha;
  • luminance: 遮罩边框图像的亮度值用作遮罩值。
  • alpha: 遮罩边框图像的 alpha 值用作遮罩值。

在撰写本文时,该属性还没有浏览器支持。

mask-border-slice

mask-border-slice 属性设置 mask-border-source 定义的遮罩图像四个边缘的内偏移量,将其分成九个部分。

每个区域的位置在此图中说明。

如您所见,有四个角、四个边和一个中心区域。四个值按顺序设置顶部、右侧、底部和左侧偏移量,例如

/* top | right | bottom | left */
mask-border-slice: 10 12 15 5;

默认情况下,源图像的中心被丢弃并被视为完全透明的黑色,除非指定了 fill 关键字

mask-border-slice: 10 12 15 5 fill;

语法

mask-border-slice 接受最多四个无单位的正数或百分比,以及可选的 fill 关键字。

mask-border-slice: [<number> | <percentage>]{1,4} fill?
  • 初始值: 0
  • 应用于: 所有元素。在 SVG 中,它应用于容器元素(不包括 <svg> 元素),所有图形元素和 <use> 元素
  • 继承:
  • 动画类型: 离散

mask-border-slice 遵循与 paddingmargin 相同的多值语法。这意味着它接受最多四个值(按顺序为 toprightbottomleft 声明偏移量),最少一个值(为所有边声明相等偏移量)。并且,这些值以顺时针方向流动,从 top 开始。

mask-border-slice: 10 15 5 7;     /* top right bottom left */
mask-border-slice: 10% 5% 15%;    /* top left/right bottom */
mask-border-slice: 0 10;          /* top/bottom left/right */
mask-border-slice: 20;            /* all edges = 20 */
mask-border-slice: 20% fill 10 8; /* Using the `fill` keyword */
  • <number>: 以像素单位测量光栅图像上的切片,或以 SVG 上的坐标测量。对于矢量图像,该数字相对于元素的大小,而不是源图像的大小。
  • <percentage>: 百分比值相对于源图像的大小——水平偏移量相对于宽度,垂直偏移量相对于高度。
  • fill: 保留图像的中间部分,用作元素上的附加遮罩图像层。中间部分的宽度和高度大小与顶部和左侧图像区域的大小匹配。如果省略 fill 关键字,则遮罩图像的中间部分将被丢弃,即被视为为空。

在以下演示中,您可以更改此属性的值并查看结果

mask-border-width

mask-border-width 属性指定元素遮罩边框的宽度。遮罩边框宽度告诉浏览器 **每条边框的宽度**(由 mask-border-slice 属性创建),以便它可以缩放遮罩边框图像以适合其中。

遮罩边框图像绘制在称为 **遮罩边框图像区域** 的区域内。这是一个区域,其边界默认情况下对应于边框框,这意味着它包含框中的边框、填充和任何内容。

border-image-width 的四个值指定用于将遮罩边框图像区域分成九个部分的偏移量。它们分别代表从该区域的顶部、右侧、底部和左侧的内距离。

语法

该属性接受最多四个值。

mask-border-width: [<length-percentage> | <number> | auto]{1,4}
  • 初始值: auto
  • 应用于: 所有元素。在 SVG 中,它应用于容器元素(不包括 <svg> 元素),所有图形元素和 <use> 元素
  • 继承:
  • 动画类型: 离散

mask-border-width 遵循与 mask-border-slice 相同的多值语法。

/* Keyword */
mask-border-width: auto;

/* <number> */
mask-border-width: 5;

/* <length-percentage> value */
mask-border-width: 2em;
mask-border-width: 15%;

/* Multiple values */
mask-border-width: 1em 1.5em;
mask-border-width: 15% 10px 5%;
mask-border-width: 10% 1em auto 20%;
  • <length-percentage>: 任何有效的非负 CSS 长度,例如 pxemrem% 等。百分比相对于 **遮罩边框图像区域的宽度(默认情况下为边框框区域)** 的水平偏移量和遮罩边框图像区域的高度垂直偏移量。
  • <number>: 代表对应计算的 border-width 的倍数,因此如果 border-width 为 5px,mask-border-image 值为 2,则遮罩边框的宽度总共为 10px。
  • auto: 如果指定,遮罩边框图像宽度将是相应图像切片的内在宽度或高度(以适用者为准)。如果图像没有所需的内在尺寸,则使用相应的 border-width

应用 border-image-width 属性后

  • 顶部和底部边缘的两个图像分别设置为与顶部和底部遮罩边框图像区域部分一样高,并且它们的宽度按比例缩放。
  • 左侧和右侧边缘的图像分别设置为与左侧和右侧遮罩边框图像区域部分一样宽,并且它们的高度按比例缩放。
  • 角部图像缩放为与它们所属的两个遮罩边框图像边缘一样宽和一样高。
  • 中间图像的宽度按与顶部图像相同的比例缩放,除非该比例为零或无穷大,在这种情况下将使用底部图像的缩放比例,如果仍然失败,则宽度不进行缩放。中间图像的高度按与左侧图像相同的比例缩放,除非该比例为零或无穷大,在这种情况下将使用右侧图像的缩放比例,如果仍然失败,则高度不进行缩放。

在以下演示中,您可以更改此属性的值并查看结果

mask-border-outset

mask-border-outset 属性指定遮罩边框图像区域超出边框框的距离。

正如我们之前所说,默认情况下,遮罩边框图像区域的边界对应于元素边框框的边界。但是,可以使用 mask-border-outset 属性扩展遮罩边框图像区域的边界。

两个边界之间的距离是 mask-border-outset 的大小。

语法

该属性接受最多四个正长度值或无单位数字。

mask-border-outset: [<length> | <number>]{1,4}
  • 初始值: 0
  • 应用于: 所有元素。在 SVG 中,它应用于容器元素(不包括 <svg> 元素),所有图形元素和 <use> 元素
  • 继承:
  • 动画类型: 离散

mask-border-outset 遵循与 mask-border-slice 相同的多值语法。

/* <number> value */
mask-border-outset: 5;

/* <length> value */
mask-border-outset: 10px;

/* Multiple values */
mask-border-outset: 1em 1.5em;
mask-border-outset: 15px 10px 5;
mask-border-outset: 10 1rem 2rem 0.5rem;
  • <length>: 任何有效的非负 CSS 长度都会设置遮罩边框突出的尺寸。
  • <number>: 无单位数字将乘以边框宽度来计算突出值,类似于无单位数字在 border-image-width 中的工作方式。

在以下演示中,您可以更改此属性的值并查看结果

mask-border-repeat

mask-border-repeat 属性控制遮罩边框图像的侧面和中间部分的图像如何在可用空间中进行缩放和平铺。

语法

mask-border-repeat: [ stretch | repeat | round | space ]{1,2}
  • 初始值: stretch
  • 应用于: 所有元素。在 SVG 中,它应用于容器元素,但不包括 <defs> 元素,所有图形元素以及 <use> 元素
  • 继承:
  • 动画类型: 离散

mask-border-repeat 属性接受一个或两个值。

  • 单个 值在所有四个侧面应用相同的行为。
  • 当存在两个 值时,第一个值应用于顶部和底部,第二个值应用于左侧和右侧
/* Keyword value */
mask-border-repeat: stretch;
mask-border-repeat: repeat;
mask-border-repeat: round;
mask-border-repeat: space;

/* vertical | horizontal */
mask-border-repeat: space round;
  • stretch: 默认值。源图像的边缘部分会根据需要进行拉伸以填充区域。如果这是第一个关键字,则顶部、中心和底部遮罩边框图像块将按比例缩放以与遮罩边框图像区域的中间部分一样宽,并且高度不会缩放。如果这是第二个关键字,则左侧、中心和右侧遮罩边框图像块将按比例缩放以与遮罩边框图像区域的中间部分一样高。宽度不会缩放。
  • repeat: 源图像的边缘部分根据需要进行平铺(重复)以填充区域,如果需要则裁剪平铺。
  • round:repeat 值相同。唯一的区别是,它不会裁剪平铺以实现正确拟合,而是会拉伸平铺。
  • space:repeat 值相同,只是,如果它不能用整数个平铺填充区域,则额外空间将分布在平铺周围,因此平铺不会被裁剪或拉伸。
mask-border-repeat 接受的所有值的演示

在以下演示中,您可以更改此属性的值并查看结果

浏览器支持

在撰写本文时,Firefox 不支持此属性。为了使该属性在基于 Chromium 的浏览器中工作,您需要使用 -webKit- 前缀,例如 -webkit-mask-box-image。构成属性(例如 -webkit-mask-box-image-repeat-webkit-mask-box-image-source 等)也是如此。

IEEdgeFirefoxChromeSafariOpera
不支持921不支持413.11151
iOS SafariAndroid ChromeAndroid FirefoxAndroid 浏览器Opera Mobile
3.21941不支持2.11641

来源: caniuse

1 使用非标准名称 -webkit-mask-box-image

更多信息