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 der Kante des Randes eines Elements zu erstellen.
Bestandteile der Eigenschaften
Diese Eigenschaft ist eine Kurzform 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 Dimensionen zum Aufteilen des Quellbildes in Regionen. 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 von der Außenseite des Elements. Es können bis zu vier Werte angegeben werden. Siehe
mask-border-outset
. <'mask-border-repeat'>
-
Definiert, wie die Randregionen des Quellbildes an die Dimensionen der Randmaske angepasst werden. Es können bis zu zwei Werte angegeben werden. Siehe
mask-border-repeat
. <'mask-border-mode'>
-
Legt fest, ob das Quellbild als Luminanzmaske 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> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Beispiele
Eine Bitmap-basierte Maskengrenze festlegen
In diesem Beispiel werden wir die Grenze eines Elements mit einem Rautenmuster maskieren. Die Quelle für die Maske ist eine ".png"-Datei mit 90 x 90 Pixeln, wobei drei Rauten vertikal und horizontal verlaufen:
![Das Bild, das für die Maskenbeispiele auf dieser Seite verwendet wird. Die Maske ist ein transparentes Quadrat mit drei Reihen von jeweils drei Rauten. Die Rauten sind in einem sehr hellen, fast weißen, Grauton. Der mittlere Teil zwischen den Rauten ist ebenfalls durchgehend grau. Die Teile zwischen der Außenseite der Rauten und dem Rand des Bildes sind transparent.](https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png)
Um die Größe einer einzelnen Raute anzupassen, verwenden wir einen Wert von 90 geteilt durch 3, also 30
, um das Bild in Eck- und Randregionen zu unterteilen. 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 |