From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:41:15 -0500
Subject: initial commit

---
 files/de/web/css/border-image/index.html | 101 +++++++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 files/de/web/css/border-image/index.html

(limited to 'files/de/web/css/border-image')

diff --git a/files/de/web/css/border-image/index.html b/files/de/web/css/border-image/index.html
new file mode 100644
index 0000000000..d489fa343d
--- /dev/null
+++ b/files/de/web/css/border-image/index.html
@@ -0,0 +1,101 @@
+---
+title: border-image
+slug: Web/CSS/border-image
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Ränder
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/border-image
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-image</code> CSS Eigenschaft ermöglicht das Zeichnen eines Bildes an den Rändern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun Kästen um das Element für einige Fälle überflüssig.<br>
+ <br>
+ <code>border-image</code> wird anstatt der Randstile benutzt, die durch die {{cssxref("border-style")}} Eigenschaft definiert werden. Es ist wichtig anzumerken, dass, wenn der berechnete Wert von {{cssxref("border-image-source")}}, welcher entweder durch <code>border-image-source</code> oder die Kurzschreibweise <code>border-image</code> gesetzt werden kann, <code>none</code> ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Siehe die entsprechenden Eigenschaften der verschiedenen Werte.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Bild_wiederholt_(repeat)">Bild wiederholt (repeat)</h3>
+
+<p>Das Bild wird aufgeteilt und einfach gekachelt, um den Randbereich zu füllen.</p>
+
+<pre class="brush:css">.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 repeat;
+}
+</pre>
+
+<p>Ergibt:<br>
+ <img alt="Beispiel für border-image: repeat" src="https://mdn.mozillademos.org/files/8199/borderRepeat.png" style="height: 120px; width: 350px;"></p>
+
+<h3 id="Bild_wiederholt_(round)">Bild wiederholt (round)</h3>
+
+<p>Die Option <code>round</code> ist eine Variante der <code>repeat</code> Option, die die Kacheln so verteilt, dass die Enden sauber verbunden sind.</p>
+
+<pre class="brush: css">.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 round;
+}</pre>
+
+<p>Ergibt:<br>
+ <img alt="Beispiel für border-image: round" src="https://mdn.mozillademos.org/files/8201/borderRound.png" style="height: 180px; width: 350px;"></p>
+
+<h3 id="Bild_gestreckt">Bild gestreckt</h3>
+
+<p>Die <code>stretch</code> Option streckt die Bilder, um den Randbereich zu füllen.</p>
+
+<pre class="brush:css">.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 stretch;
+}</pre>
+
+<p>Ergibt:<br>
+ <img alt="Beispiel für border-image: stretch" src="https://mdn.mozillademos.org/files/8203/borderStretch.png" style="height: 120px; width: 350px;"></p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-image")}}
-- 
cgit v1.2.3-54-g00ecf