mask-border-source

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die mask-border-source CSS Eigenschaft legt das Quellbild fest, das verwendet wird, um den Maskenrand eines Elements zu erstellen.

Die mask-border-slice Eigenschaft wird verwendet, um das Quellbild in Bereiche zu unterteilen, die dann dynamisch auf den endgültigen Maskenrand angewendet werden.

Syntax

css

/* Keyword value */
mask-border-source: none;

/* <image> values */
mask-border-source: url(image.jpg);
mask-border-source: linear-gradient(to top, red, yellow);

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

Werte

none: Kein Maskenrand wird verwendet.
<image>: Bildreferenz, die für den Maskenrand verwendet werden soll.

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des `<defs>` Elements und allen Grafikelementen
Vererbt	Nein
Berechneter Wert	wie angegeben, aber mit absoluten `<url>` Werten
Animationstyp	diskret

Formale Syntax

mask-border-source = 
  none     |
  <image>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Grundlegende Verwendung

Diese Eigenschaft scheint derzeit noch nicht unterstützt zu werden. Sobald sie unterstützt wird, dient sie dazu, die Quelle des Rands der Maske zu definieren.

css

mask-border-source: url(image.jpg);

Auf Chromium-basierte Browser unterstützen eine veraltete Version dieser Eigenschaft — mask-box-image-source — mit einem Präfix:

css

-webkit-mask-box-image-source: url(image.jpg);

Hinweis: Die Seite mask-border enthält ein funktionierendes Beispiel (unter Verwendung der veralteten prefixed Maskenrand-Eigenschaften, die in Chromium unterstützt werden), damit Sie sich eine Vorstellung vom Effekt machen können.

Spezifikationen

Specification
CSS Masking Module Level 1 # the-mask-border-source