mask-border
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die mask-border CSS Kurzschreibweise ermöglicht es Ihnen, eine Maske entlang des Randes eines Elements zu erstellen.
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* 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;
Werte
<'mask-border-source'>-
Das Quellbild. Siehe
mask-border-source. <'mask-border-slice'>-
Die Abmessungen für das Zerschneiden des Quellbildes in Bereiche. Es können bis zu vier Werte angegeben werden. Siehe
mask-border-slice. <'mask-border-width'>-
Die Breite der Randmaske. Es können bis zu vier Werte angegeben werden. Siehe
mask-border-width. <'mask-border-outset'>-
Der Abstand der Randmaske vom äußeren Rand des Elements. Es können bis zu vier Werte angegeben werden. Siehe
mask-border-outset. <'mask-border-repeat'>-
Definiert, wie die Randbereiche des Quellbildes angepasst werden, um die Abmessungen der Randmaske zu erfüllen. Es können bis zu zwei Werte angegeben werden. Siehe
mask-border-repeat. <'mask-border-mode'>-
Bestimmt, ob das Quellbild als Luminanz- oder Alphamaske behandelt wird. Siehe
mask-border-mode.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen |
| Vererbt | Nein |
| Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
| Erstellt Stapelkontext | Ja |
Formale Syntax
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> |
<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>
Beispiele
Setzen einer bitmap-basierten Maskenbegrenzung
In diesem Beispiel maskieren wir den Rand eines Elements mit einem Rautenmuster. Die Quelle für die Maske ist eine ".png"-Datei mit 90 mal 90 Pixeln, die drei Rauten vertikal und horizontal enthält:
Um die Größe einer einzelnen Raute anzupassen, verwenden wir einen Wert von 90 geteilt durch 3, also 30, um das Bild in Ecken- und Randbereiche zu zerschneiden. Ein Wiederholungswert von round sorgt dafür, dass die Maskenschnitte gleichmäßig passen, d.h. ohne Abschneiden oder Lücken.
<div class="masked">
This element is surrounded by a bitmap-based mask border! Pretty neat, isn't
it?
</div>
.masked {
width: 200px;
background-color: lavender;
border: 18px solid salmon;
padding: 10px;
-webkit-mask-box-image: url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
30 fill / /* slice */
20px / /* width */
1px /* outset */
round; /* repeat */
mask-border:
url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
30 fill / /* slice */
20px / /* width */
1px /* outset */
round; /* repeat */
}
Spezifikationen
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-border |