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 Kurzform-Eigenschaft ermöglicht es Ihnen, eine Maske entlang des Randes eines Elements zu erstellen.

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzform 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 Zerschneiden des Quellbilds in Bereiche. Es können bis zu vier Werte angegeben werden. Siehe mask-border-slice.
<'mask-border-width'>: Die Breite der Randmaske. Es können bis zu vier Werte angegeben werden. Siehe mask-border-width.
<'mask-border-outset'>: Der Abstand der Randmaske von der äußeren Kante des Elements. Es können bis zu vier Werte angegeben werden. Siehe mask-border-outset.
<'mask-border-repeat'>: Definiert, wie die Randbereiche des Quellbilds angepasst werden, um in die Dimensionen der Randmaske zu passen. Es können bis zu zwei Werte angegeben werden. Siehe mask-border-repeat.
<'mask-border-mode'>: Definiert, ob das Quellbild als Luminanzmaske 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

Einstellung eines bitmapbasierten Maskenrandes

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

Das Bild, das für die Maskenbeispiele auf dieser Seite verwendet wird. Die Maske ist ein transparenter Quadrat mit drei Reihen aus jeweils drei Diamanten. Die Diamanten sind in einem sehr hellen, fast weißen Grauton gehalten. Der mittlere Teil zwischen den Diamanten ist ebenfalls solid grau. Die Bereiche zwischen dem äußeren Rand der Diamanten und dem Rand des Bildes sind transparent.

Um die Größe eines einzelnen Diamanten abzugleichen, verwenden wir einen Wert von 90 geteilt durch 3, oder 30, um das Bild in Eck- und Randbereiche zu zerschneiden. Ein Wiederholungswert von round sorgt dafür, dass die Maskenschnitte gleichmäßig passen, d.h. ohne Schneiden oder Lücken.

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