mask-border-width
CSS
property sets the width of an element's
mask border
.
/* Keyword value */ mask-border-width: auto; /* <length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width: 3; /* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /* Global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset;
mask-border-width
property may be specified using one, two, three, or four values chosen from the list of values below.
<length-percentage>
<length>
或
<percentage>
. Percentages are relative to the
width
of the border area for horizontal offsets and the
height
of the border area for vertical offsets. Must not be negative.
<number>
border-width
. Must not be negative.
auto
mask-border-slice
. If the image does not have the required intrinsic dimension, the corresponding
border-width
is used instead.
| 初始值 |
auto
|
|---|---|
| 适用于 |
all elements; In SVG, it applies to container elements excluding the
defs
element and all graphics elements
|
| 继承 | no |
| 百分比 | relative to width/height of the mask border image area |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| 动画类型 | discrete |
[ <length-percentage> | <number> | auto ]{1,4}where
<length-percentage> = <length> | <percentage>
This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to
mask-border-slice
will cause the slices to be scaled to fit the border mask.
mask-border-width: 30 fill;
Chromium-based browsers support an outdated version of this property —
mask-box-image-width
— with a prefix:
-webkit-mask-box-image-width: 20px;
注意
: The
mask-border
page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Masking Module Level 1
The definition of 'mask-border-width' in that specification. |
候选推荐 | 初始定义 |
TBD