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 Quellebild fest, das verwendet wird, um das Rahmenbild eines Elements zu erstellen.

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;
}

Die Eigenschaft border-image-slice wird verwendet, um das Quellebild in Bereiche zu unterteilen, die dann dynamisch auf das endgültige Rahmenbild angewendet werden.

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 durch border-style definierte Erscheinungsbild angezeigt.
<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 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