mask-origin

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die mask-origin CSS Eigenschaft legt den Ursprung einer Maske fest.

Für Elemente, die als einzelne Box gerendert werden, gibt diese Eigenschaft den Maskierungspositionierungsbereich an. Mit anderen Worten, sie legt die Ursprungsposition eines Bildes fest, das durch die mask-image CSS-Eigenschaft angegeben wird. Für Elemente, die als mehrere Boxen gerendert werden, wie Inline-Boxen auf mehreren Zeilen oder Boxen auf mehreren Seiten, gibt sie an, auf welche Boxen box-decoration-break angewendet wird, um den Maskierungspositionierungsbereich zu bestimmen.

Syntax

css

/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Multiple values */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* Non-standard keyword values */
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;

/* Global values */
mask-origin: inherit;
mask-origin: initial;
mask-origin: revert;
mask-origin: revert-layer;
mask-origin: unset;

Eines oder mehrere der unten aufgeführten Schlüsselwortwerte, getrennt durch Kommas.

Werte

content-box: Die Position ist relativ zur Inhaltsbox.
padding-box: Die Position ist relativ zur Polsterbox. Für Einzelboxen ist 0 0 die obere linke Ecke des Polsterrandes, 100% 100% ist die untere rechte Ecke.
border-box: Die Position ist relativ zur Rahmenbox.
fill-box: Die Position ist relativ zur Objektbegrenzungsbox.
stroke-box: Die Position ist relativ zur Strichbegrenzungsbox.
view-box: Verwendet das nächste SVG-Ansichtsfenster als Referenzbox. Falls ein viewBox Attribut für das Element, das das SVG-Ansichtsfenster erstellt, angegeben ist, wird die Referenzbox am Ursprung des durch das viewBox Attribut festgelegten Koordinatensystems positioniert und die Dimension der Referenzbox auf die Breite und Höhe der viewBox Werte eingestellt.
content: Entspricht content-box.
padding: Entspricht padding-box.
border: Entspricht border-box.

Formale Definition

Initialer Wert	`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-origin = 
  <coord-box>#  

<coord-box> = 
  <paint-box>  |
  view-box     

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

Specification
CSS Masking Module Level 1 # the-mask-origin

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Clipping und Masking in CSS