mask-border

Limited availability

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

Die mask-border CSS Kurzschreibweise ermöglicht es Ihnen, eine Maske entlang des Rands eines Elemente-Borderrandes zu erstellen.

Bestandeigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css

/* source | slice */
mask-border: url("border-mask.png") 25;

/* source | slice | repeat */
mask-border: url("border-mask.png") 25 space;

/* source | slice | width */
mask-border: url("border-mask.png") 25 / 35px;

/* source | slice | width | outset | repeat | mode */
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

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

Werte

<'mask-border-source'>: Das Quellbild. Siehe mask-border-source.
<'mask-border-slice'>: Die Dimensionen zum Schneiden des Quellbildes in Regionen. Es können bis zu vier Werte angegeben werden. Siehe mask-border-slice.
<'mask-border-width'>: Die Breite der Maskengrenze. Es können bis zu vier Werte angegeben werden. Siehe mask-border-width.
<'mask-border-outset'>: Der Abstand der Maskengrenze vom Außenrand des Elements. Es können bis zu vier Werte angegeben werden. Siehe mask-border-outset.
<'mask-border-repeat'>: Definiert, wie die Randregionen des Quellbildes angepasst werden, um den Dimensionen der Maskengrenze zu entsprechen. Es können bis zu zwei Werte angegeben werden. Siehe mask-border-repeat.
<'mask-border-mode'>: Definiert, ob das Quellbild als Luminanz- oder Alphamaske behandelt wird. Siehe mask-border-mode.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `mask-border-mode`: `alpha` `mask-border-outset`: `0` `mask-border-repeat`: `stretch` `mask-border-slice`: `0` `mask-border-source`: `none` `mask-border-width`: `auto`
Anwendbar auf	alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des `<defs>` Elements und allen Grafikelementen
Vererbt	Nein
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `mask-border-slice`: refer to size of the mask border image `mask-border-width`: relative to width/height of the mask border image area
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `mask-border-mode`: wie angegeben `mask-border-outset`: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers `mask-border-repeat`: wie angegeben `mask-border-slice`: wie angegeben `mask-border-source`: wie angegeben, aber mit absoluten `<url>` Werten `mask-border-width`: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	wie die jeweiligen Kurzschreibweisen: `mask-border-mode`: diskret `mask-border-outset`: diskret `mask-border-repeat`: diskret `mask-border-slice`: diskret `mask-border-source`: diskret `mask-border-width`: diskret
Erstellt Stapelkontext	Ja

Formale Syntax

mask-border = 
  <'mask-border-source'>                              ||
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||
  <'mask-border-repeat'>                              ||
  <'mask-border-mode'>                                

<mask-border-source> = 
  none     |
  <image>  

<mask-border-slice> = 
  [ <number> | <percentage> ]{1,4} fill?  

<mask-border-width> = 
  [ <length-percentage> | <number> | auto ]{1,4}  

<mask-border-outset> = 
  [ <length> | <number> ]{1,4}  

<mask-border-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<mask-border-mode> = 
  luminance  |
  alpha      

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<length-percentage> = 
  <length>      |
  <percentage>  

<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

Einstellen einer bitmap-basierten Maskengrenze

In diesem Beispiel maskieren wir den Rand eines Elements mit einem Rautenmuster. Die Quelle für die Maske ist eine ".png"-Datei mit 90 mal 90 Pixeln, mit drei Rauten vertikal und horizontal:

Das Bild, das für die Maskenbeispiele auf dieser Seite verwendet wird. Die Maske ist ein transparenter Quadrat mit drei Reihen von je drei Rauten. Die Rauten sind in einem sehr hellen, fast weißen Grauton. Der Mittelteil zwischen den Rauten ist auch in festem Grau. Die Teile zwischen der Außenseite der Rauten und dem Rand des Bildes sind transparent.

Um die Größe einer einzelnen Raute zu treffen, verwenden wir einen Wert von 90 geteilt durch 3 oder 30, um das Bild in Eck- und Randregionen zu unterteilen. Ein Wiederholungswert von round sorgt dafür, dass die Maskenschnitte gleichmäßig ohne Zuschneidung oder Lücken passen.

html

<div class="masked">
  This element is surrounded by a bitmap-based mask border! Pretty neat, isn't
  it?
</div>

css

.masked {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  -webkit-mask-box-image: url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
    30 fill /          /* slice */
    20px /             /* width */
    1px                /* outset */
    round;             /* repeat */

  mask-border:
    url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
    30 fill /        /* slice */
    20px /           /* width */
    1px              /* outset */
    round;           /* repeat */
}

Spezifikationen

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

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