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 February 2017.

Die border-image-source CSS Eigenschaft legt das Quellbild fest, das verwendet wird, um das Randbild 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: #000;
  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 Quellbild in Regionen zu unterteilen, die dann dynamisch auf das endgültige Randbild 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 Randbild verwendet. Stattdessen wird das Erscheinungsbild angezeigt, das durch border-style definiert ist.

<image>

Bildreferenz zur Verwendung für den Rand.

Formale Definition

Anfangswertnone
Anwendbar aufAlle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertnone oder das Bild mit absoluter URI
Animationstypdiskret

Formale Syntax

border-image-source = 
  none     |
  <image>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Einfaches Beispiel

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch