border-image-source

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.

Dieborder-image-sourceCSS-Eigenschaft legt das Quellbild fest, das verwendet wird, um dasRandbild eines Elements zu erstellen.

Die Eigenschaftborder-image-slice wird verwendet, um das Quellbild in Bereiche zu unterteilen, die dann dynamisch auf das endgültige Randbild angewendet werden.

Probieren Sie es aus

border-image-source: url("/shared-assets/images/examples/border-diamonds.png");

border-image-source: url("/shared-assets/images/examples/border-stars.png");

border-image-source: repeating-linear-gradient(  45deg,  transparent,  #4d9f0c 20px);

border-image-source: none;

<section>  <div>This is a box with a border around it.</div></section>

#example-element {  width: 80%;  height: 80%;  display: flex;  align-items: center;  justify-content: center;  padding: 50px;  background: #fff3d4;  color: black;  border: 30px solid;  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30    round;  font-size: 1.2em;}

Syntax

css

/* Keyword value */border-image-source: none;/* <image> values */border-image-source: url("image.jpg");border-image-source: linear-gradient(to top, red, yellow);/* Global values */border-image-source: inherit;border-image-source: initial;border-image-source: revert;border-image-source: revert-layer;border-image-source: unset;

Werte

none: Es wird kein Randbild verwendet. Stattdessen wird das durchborder-style definierte Erscheinungsbild angezeigt.
<image>: Bildreferenz, die für den Rand verwendet werden soll.

Formale Definition

Anfangswert	`none`
Anwendbar auf	Alle Elemente, außer interne Tabellenelemente, falls`border-collapsecollapse` ist. Auch anwendbar auf`::first-letter`.
Vererbt	Nein
Berechneter Wert	`none` oder das Bild mit absoluter URI
Animationstyp	diskret

Formale Syntax

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

Grundlegendes Beispiel

css

.box {  border-image-source: url("image.png");}

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3 # border-image-source

Browser-Kompatibilität

Siehe auch

border
outline
box-shadow
background-image
<url>-Typ
Randbilder in CSS: Ein Schwerpunktbereich für Interop 2023 auf dem MDN-Blog (2023)

Help improve MDN

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

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

Movatterモバイル変換

border-image-source

Help improve MDN