mask-border

mask-border CSS 简写属性 允许您在元素边框的边缘创建遮罩。

组成属性

此属性是以下 CSS 属性的简写形式

语法

css
/* source | slice */
mask-border: url("border-mask.png") 25;

/* source | slice | repeat */
mask-border: url("border-mask.png") 25 space;

/* source | slice | width */
mask-border: url("border-mask.png") 25 / 35px;

/* source | slice | width | outset | repeat | mode */
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

/* Global values */
mask-border: inherit;
mask-border: initial;
mask-border: revert;
mask-border: revert-layer;
mask-border: unset;

值

<'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。

正式定义

初始值作为简写形式的每个属性
应用于所有元素；在 SVG 中，它应用于容器元素，但不包括 <defs> 元素和所有图形元素
继承否
百分比作为简写形式的每个属性
计算值作为简写形式的每个属性
动画类型作为简写形式的每个属性
创建 层叠上下文是

正式语法

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

<mask-border-source> = 
  none     |
  <image>  

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

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

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

<mask-border-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<mask-border-mode> = 
  luminance  |
  alpha      

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

设置基于位图的遮罩边框

在这个示例中，我们将使用菱形图案来遮罩元素的边框。遮罩的来源是一个 90x90 像素的 ".png" 文件，其中包含三个垂直和水平排列的菱形。

The image used for the mask examples on this page. The mask is a transparent square with three rows of three diamonds each. The diamonds are a very light, almost white, shade of grey. The middle part between the diamonds is also solid grey. The parts between the outside of the diamonds and the edge of the image are transparent.

为了匹配单个菱形的大小，我们将使用 90 除以 3，即 30，作为将图像切分为角区域和边缘区域的值。round 的重复值将使遮罩切片均匀地拟合，即没有裁剪或间隙。

规范

规范
CSS 遮罩模块级别 1
# the-mask-border

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅