mask-border-slice

CSS属性除以掩模边界源成区域的图像集合。这些区域用于形成元素的遮罩边框的组成部分。mask-border-slice

句法

/* All sides */
mask-border-slice: 30%;

/* vertical | horizontal */
mask-border-slice: 10% 30%;

/* top | horizontal | bottom */
mask-border-slice: 30 30% 45;

/* top | right | bottom | left */
mask-border-slice: 7 12 14 5;

/* Using the `fill` keyword */
mask-border-slice: 10% fill 7 12;

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

mask-border-slice属性可使用一至四个指定<number-percentage>值来表示每个图像切片的位置。负值无效;大于其相应尺寸的值被钳制为100%

  • 一个被指定的位置,它在从它们各自的两侧是相同的距离创建所有四片。
  • 2点被指定的位置,所述第一值创建一个从测量的层的顶部和底部,所述第二创建从所测量的片左右
  • 当指定了三个位置时,第一个值创建从顶部开始测量的切片,第二个值创建从左侧和右侧开始测量的切片,第三个值创建从底部开始测量的切片。
  • 当指定了四个位置时,它们创建从按该顺序(顺时针)测量的切片。

fill如果使用了可选值,则可以将其放置在声明中的任何位置。

价值观

<number>
表示光栅图像的边缘偏移量(像素)和矢量图像的坐标。对于矢量图像,数字是相对于元素的大小,而不是源图像的大小,因此在这些情况下,通常最好使用百分比。
<percentage>
将边缘偏移量表示为源图像尺寸的百分比:水平偏移量的图像宽度,垂直偏移量的高度。
fill
保留中间图像区域。其宽度和高度的大小分别匹配顶部和左侧图像区域。

描述

切片过程总共创建了九个区域:四个角,四个边缘和一个中间区域。四个切片线,从其各自的侧面设置了给定的距离,以控制区域的大小。

由border-image或border-image-slice属性定义的九个区域

上图说明了每个区域的位置。

mask-border-repeatmask-border-widthmask-border-outset属性决定了这些区域用于形成最终的蒙版边框。

正式定义

初始值0
适用元素all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性
Percentagesrefer to size of the mask border image
计算值as specified
Animation typediscrete

形式语法

<number-percentage>{1,4} fill?

where
<number-percentage> = <number> | <percentage>

例子

基本用法

该属性似乎在任何地方都不受支持。最终开始受支持时,它将用于定义从源图像获取的切片的大小,并用于创建边框蒙版。

mask-border-slice: 30 fill;

基于Chromium的浏览器支持此属性的过时版本mask-box-image-slice-带前缀:

-webkit-mask-box-image-slice: 30 fill;

注意:该mask-border页面提供了一个有效的示例(使用Chromium支持的过期前缀边框蒙版属性),因此您可以大致了解效果。

注意:如果希望元素的内容可见,则必须包含fill关键字。

技术指标

规范 状态 评论
CSS Masking Module Level 1
mask-border-slice
}
Candidate Recommendation 初始定义

浏览器兼容性

待定

也可以看看