mask-border-source CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more support for this feature? Tell us why.
Die mask-border-source CSS Eigenschaft 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 Bereiche 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
| 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 =
<'border-image-source'>
<border-image-source> =
none |
<image>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Beispiele
Grundlegende Verwendung
Diese Eigenschaft wird anscheinend noch nicht unterstützt. Wenn sie schließlich unterstützt wird, wird sie dazu dienen, die Quelle der Randmaske 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 Maskenrahmeneigenschaften mit Präfix, die in Chromium unterstützt werden), sodass Sie eine Vorstellung vom Effekt bekommen können.
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # the-mask-border-source |