mask-border

语法

/* 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;

Values

<'mask-border-source'>

该属性为源图像。参见 mask-border-source.

<'mask-border-slice'>

将源图像切割后的区域的尺寸，最多可指定四个值。参见 mask-border-slice.

<'mask-border-width'>

边框 mask 的宽度。最多可指定四个值。参见 mask-border-width.

<'mask-border-outset'>

边框 mask 距离元素外边界的距离。最多可指定四个值。参见 mask-border-outset.

<'mask-border-repeat'>

定义如何调整源图像的边缘区域以适应边框 mask 的尺寸。最多可指定四个值。参见 mask-border-repeat.

<'mask-border-mode'>

定义是否将源图片设置为明亮度 mask，或者透明度 mask. 参见 mask-border-mode.

形式语法

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

<mask-border-source> = 
  <'border-image-source'>  

<mask-border-slice> = 
  <'border-image-slice'>  

<mask-border-width> = 
  <'border-image-width'>  

<mask-border-outset> = 
  <'border-image-outset'>  

<mask-border-repeat> = 
  <'border-image-repeat'>  

<mask-border-mode> = 
  luminance  |
  alpha      

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

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

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

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

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

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

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

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

示例

Bitmap

在此范例中，我们将使用钻石图案来给元素添加 mask. mask 的源文件是一个 ".png" 文件，大小为 90 像素 * 90 像素，三颗钻石垂直和水平交叉；

HTML

<div id="bitmap">
  This element is surrounded by a bitmap-based mask border! Pretty neat, isn't
  it?
</div>

CSS

为了适应一个钻石的大小，我们使用 90/3 或者 30，用于设置将图像切割至边角以及边缘区域的值，并设置 repeat 属性为 round ，该属性使得切片均匀贴合，例如：没有裁剪和空隙。

div {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  mask-border: url("mask-border-diamonds.png") 30 / 36px 18px round;
}

结果

规范

浏览器兼容性