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⁩.

Die border-image-source CSS Eigenschaft legt das Quellbild fest, das zum Erstellen des Rahmenbildes eines Elements verwendet wird.

Die border-image-slice Eigenschaft wird verwendet, um das Quellbild in verschiedene Bereiche zu unterteilen, die dann dynamisch auf das endgültige Rahmenbild 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 id="default-example"> <div id="example-element">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 Rahmenbild verwendet. Stattdessen wird das Erscheinungsbild gezeigt, das durch border-style definiert ist.
<image>: Bildreferenz, die für den Rahmen verwendet werden soll.

Formale Definition

Anfangswert	`none`
Anwendbar auf	Alle Elemente, außer interne Tabellenelemente, falls `border-collapse` `collapse` 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

Einfaches 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
Rahmenbilder in CSS: Ein zentraler Fokusbereich für Interop 2023 im 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