mask-clip CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS-Eigenschaft mask-clip bestimmt den Bereich, der von einer Maske betroffen ist. Der gezeichnete Inhalt eines Elements muss auf diesen Bereich beschränkt werden.
Syntax
/* <coord-box> values */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;
/* Keyword value */
mask-clip: no-clip;
/* Multiple values */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;
/* Global values */
mask-clip: inherit;
mask-clip: initial;
mask-clip: revert;
mask-clip: revert-layer;
mask-clip: unset;
Werte
Die Eigenschaft akzeptiert eine durch Kommata getrennte Liste von Schlüsselwortwerten. Jeder Wert ist ein <coord-box> oder no-clip:
content-box-
Der gezeichnete Inhalt wird auf die Inhaltsbox zugeschnitten.
padding-box-
Der gezeichnete Inhalt wird auf die Innenabstandsbox zugeschnitten.
border-box-
Der gezeichnete Inhalt wird auf die Rahmenbox zugeschnitten.
fill-box-
Der gezeichnete Inhalt wird auf die Objektbegrenzungsbox zugeschnitten.
stroke-box-
Der gezeichnete Inhalt wird auf die Strichbegrenzungsbox zugeschnitten.
view-box-
Verwendet den nächstgelegenen SVG-Viewport als Referenzbox. Wenn für das Element, das den SVG-Viewport erstellt, ein
viewBox-Attribut angegeben ist, wird die Referenzbox am Ursprung des durch dasviewBox-Attribut festgelegten Koordinatensystems positioniert, und die Abmessungen der Referenzbox werden auf die Breiten- und Höhenwerte desviewBox-Attributs gesetzt. no-clip-
Der gezeichnete Inhalt wird nicht zugeschnitten.
border-
Dieses Schlüsselwort verhält sich genauso wie
border-box. padding-
Dieses Schlüsselwort verhält sich genauso wie
padding-box. content-
Dieses Schlüsselwort verhält sich genauso wie
content-box. text-
Dieses Schlüsselwort schneidet das Maskenbild auf den Text des Elements zu.
Beschreibung
Die Eigenschaft mask-clip definiert den Bereich des Elements, der von der angewendeten Maske betroffen ist.
Für Maskenebenbilder, die nicht auf ein SVG-<mask>-Element verweisen, definiert die Eigenschaft mask-clip den Maskenzeichnungsbereich oder den von der Maske betroffenen Bereich. Der gezeichnete Inhalt des Elements wird auf diesen Bereich beschränkt.
Die Eigenschaft mask-clip hat keine Auswirkung auf ein Maskenebenenbild, das auf ein <mask>-Element verweist. Die Attribute x, y, width, height und maskUnits des <mask>-Elements bestimmen den Maskenzeichnungsbereich, wenn die Quelle von mask-image ein <mask> ist.
Auf ein Element können mehrere Maskenebenen angewendet werden. Die Anzahl der Ebenen wird durch die Anzahl der durch Kommata getrennten Werte im Eigenschaftswert von mask-image bestimmt, selbst wenn ein Wert none ist. Jeder mask-clip-Wert in der durch Kommata getrennten Werteliste wird der Reihe nach den mask-image-Werten zugeordnet. Wenn die Anzahl der Werte in den beiden Eigenschaften unterschiedlich ist, werden überzählige Werte von mask-clip nicht verwendet. Falls mask-clip weniger Werte als mask-image hat, werden die mask-clip-Werte wiederholt.
Formale Definition
| Anfangswert | border-box |
|---|---|
| Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
mask-clip =
[ <coord-box> | no-clip ]#
<coord-box> =
<paint-box> |
view-box
<paint-box> =
<visual-box> |
fill-box |
stroke-box
<visual-box> =
content-box |
padding-box |
border-box
Beispiele
Eine Maske auf die Rahmenbox zuschneiden
Dieses Beispiel demonstriert drei mask-clip-Werte.
HTML
Wir fügen drei Elemente ein, die jeweils einen anderen <coord-box>-Wert als Klassennamen haben.
<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>
CSS
Das CSS definiert für das Element einen Hintergrund, einen Rahmen, Innenabstand und Außenabstand sowie ein Maskenbild, wobei jedes <div> ein anderes <coord-box> hat. Wir haben Inhalt mit dem Namen der Klasse erzeugt und diesen Text um 10px nach oben verschoben, damit er nicht aus dem sichtbaren Bereich maskiert wird.
div {
width: 100px;
height: 100px;
background-color: #8cffa0;
margin: 10px;
border: 20px solid #8ca0ff;
padding: 20px;
mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");
mask-size: 100% 100%;
}
.content-box {
mask-clip: content-box;
}
.border-box {
mask-clip: border-box;
}
.padding-box {
mask-clip: padding-box;
}
div::before {
content: attr(class);
position: relative;
top: -10px;
}
Ergebnisse
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # the-mask-clip |