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
/* 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
Formale Definition
Initialer Wert | 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 nirgendwo unterstützt zu werden. Wenn sie schließlich unterstützt wird, dient sie dazu, die Quelle des Maskenrahmens zu definieren.
mask-border-source: url(image.jpg);
Chromium-basierte Browser unterstützen eine veraltete Version dieser Eigenschaft — mask-box-image-source
— mit einem Präfix:
-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
BCD tables only load in the browser