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 (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 Bereiche 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

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>           |
  <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 scheint derzeit noch nirgends unterstützt zu werden. Sobald sie unterstützt wird, wird sie dazu dienen, die Quelle des Maskenrahmens zu definieren.

css

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

Browser auf Chromium-Basis 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, mit Präfix versehenen Maskenrahmen-Eigenschaften, die in Chromium unterstützt werden), sodass Sie einen Eindruck von der Wirkung bekommen können.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden