CSS-Randbilder


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


CSS Border Images

With the CSS border-image property, you can set an image to be used as the border around an element.


CSS-Eigenschaft „border-image“.

Mit der CSS-Eigenschaft border-image können Sie ein Bild angeben, das anstelle des normalen Rahmens um ein Element verwendet werden soll.

Das Anwesen besteht aus drei Teilen:

  1. Das Bild, das als Rahmen verwendet werden soll

  2. Wo soll das Bild geschnitten werden?

  3. Legen Sie fest, ob die Mittelabschnitte wiederholt oder gestreckt werden sollen

Wir werden das folgende Bild verwenden (genannt „border.png“):

Die Eigenschaft border-image nimmt das Bild und unterteilt es in neun Abschnitte. wie ein Tic-Tac-Toe-Brett. Anschließend werden die Ecken an den Ecken platziert und die Die mittleren Abschnitte werden nach Ihren Wünschen wiederholt oder gestreckt.

Hinweis: Damit border-image funktioniert, benötigt das Element auch das border-Eigenschaft festgelegt!

Hier werden die mittleren Abschnitte des Bildes wiederholt, um den Rand zu erstellen:

An image as a border!

Hier ist der Code:

Beispiel

  #borderimg
{
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 
30 round;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p>Here, the middle sections of the image are repeated to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>

<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>


Hier werden die mittleren Bildbereiche gestreckt, um den Rand zu erzeugen:

An image as a border!

Hier ist der Code:

Beispiel

  #borderimg
{
     border: 10px solid transparent;
  
padding: 15px;
  border-image: url(border.png) 
30 stretch;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p>Here, the middle sections of the image are stretched to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 stretch;</p>

<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>


Tipp: Die Eigenschaft border-image ist eigentlich eine Abkürzung für die Eigenschaften:

border-image-source
border-image-slice
border-image-width
border-image-outset 
border-image-repeat


CSS-Rahmenbild - Verschiedene Slice-Werte

Unterschiedliche Slice-Werte verändern das Aussehen des Rahmens vollständig:

Beispiel 1:

border-image: url(border.png) 50 round;

Beispiel 2:

border-image: url(border.png) 20% round;

Beispiel 3:

border-image: url(border.png) 30% round;

Hier ist der Code:

Beispiel

   #borderimg1 {
  border: 10px solid transparent;
  
padding: 15px;
  border-image: url(border.png) 
50 round;
}
#borderimg2 {
  
border: 10px solid transparent;
  padding: 15px;
  
border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  
padding: 15px;
  border-image: url(border.png) 
30% round;
} 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>
<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>




Eigenschaften von CSS-Randbildern

border-image

Eine Abkürzungseigenschaft zum Festlegen aller border-image-*-Eigenschaften

border-image-source

Gibt den Pfad zum Bild an, das als Rahmen verwendet werden soll

border-image-slice

Gibt an, wie das Randbild geschnitten wird

border-image-width

Gibt die Breite des Randbildes an

border-image-outset

Gibt den Betrag an, um den der Randbildbereich über das Randfeld hinausragt

border-image-repeat

Gibt an, ob das Randbild wiederholt, abgerundet oder gestreckt werden soll