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-Eigenschaft von CSS legt das Quellbild fest, das verwendet wird, um den Maskenrahmen eines Elements zu erstellen.

Die mask-border-slice-Eigenschaft wird verwendet, um das Quellbild in Regionen zu unterteilen, die dann dynamisch auf den endgültigen Maskenrahmen 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

Es wird kein Maskenrahmen verwendet.

<image>

Bildreferenz, die für den Maskenrahmen verwendet wird.

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen
VererbtNein
Berechneter Wertwie angegeben, aber mit absoluten <url> Werten
Animationstypdiskret

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 nirgendwo unterstützt zu werden. Wenn sie schließlich unterstützt wird, dient sie dazu, die Quelle des Maskenrahmens zu definieren.

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

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, in Chromium unterstützten maskierten Rahmen-Eigenschaften mit Präfix), damit Sie eine Vorstellung von der Wirkung bekommen.

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-border-source

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

Siehe auch