diff options
Diffstat (limited to 'files/de/web/css/border-style')
| -rw-r--r-- | files/de/web/css/border-style/index.html | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/files/de/web/css/border-style/index.html b/files/de/web/css/border-style/index.html new file mode 100644 index 0000000000..32aa331b10 --- /dev/null +++ b/files/de/web/css/border-style/index.html @@ -0,0 +1,219 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-style +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>border-style</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft ist eine Kurzschreibweise zum Setzen des Linienstils für alle vier Seiten des Elementrands.</p> + +<div class="note"><strong>Hinweis:</strong> Der Standardwert von <code>border-style</code> ist <code>none</code>. Das bedeutet, falls die {{cssxref("border-width")}} und die {{cssxref("border-color")}} geändert werden, wird der Rand nicht angezeigt, solange diese Eigenschaft nicht auf etwas anderes als <code>none</code> oder <code>hidden</code> gesetzt wird.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* Auf alle vier Seiten anwenden */ +border-style: dashed; + +/* horizontal | vertikal */ +border-style: dotted solid; + +/* open | horizontal | vertikal */ +border-style: hidden double dashed; + +/* open | rechts | unten | links */ +border-style: none solid dotted dashed; + +/* Global values */ +border-style: inherit; +border-style: initial; +border-style: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><br-style></code></dt> + <dd>Ist ein Schlüsselwort, das den Stil des unteren Rahmens beschreibt. Es kann die folgenden Werte annehmen: + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>none</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Wie beim <code>hidden</code> Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} <code>0</code>, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der <code>none</code> Wert die niedrigste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er angezeigt.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>hidden</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Wie beim <code>none</code> Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} <code>0</code>, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der <code>hidden</code> Wert die höchste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er nicht angezeigt.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dotted</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt eine Reihe von runden Punkten an. Die Abstände der Punkte werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch. Der Radius der Punkte ist die halbe {{cssxref("border-width")}}.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dashed</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt eine Reihe von kurzen Strichen mit quadratischen Enden oder Liniensegmenten an. Die exakte Größe und Länger der Segmente werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>solid</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt eine einfache, gerade, ausgefüllte Linie an.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>double</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt zwei gerade Linien an, die zum Pixelwert hinzugefügt werden, der durch {{cssxref("border-width")}} definiert wird.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>groove</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt einen Rahmen an, der zu einem eingeritzten Effekt führt. Er ist das Gegenteil von <code>ridge</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>ridge</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt einen Rahmen mit einem 3D-Effekt an, so als ob es aus der Seite herauskommt. Er ist das Gegenteil von <code>groove</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>inset</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt einen Rahmen an, der die Box so darstellt, als wäre sie eingelassen. Es ist das Gegenteil von <code>outset</code>. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf collapsed gesetzt angewendet, verhält sich dieser Wert wie groove.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>outset</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;"> + <p>Zeigt einen Rahmen an, der die Box in 3D wie geprägt darstellt. Es ist das Gegenteil von <code>inset</code>. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf <code>collapsed</code> gesetzt angewendet, verhält sich dieser Wert wie <code>ridge</code>.</p> + </td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Tabelle_mit_allen_Eigenschaftswerten">Tabelle mit allen Eigenschaftswerten</h3> + +<p>Hier ist ein Beispiel aller Eigenschaftswerte.</p> + +<h4 id="HTML_Inhalt">HTML Inhalt</h4> + +<pre class="brush: html notranslate"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS_Inhalt">CSS Inhalt</h4> + +<pre class="brush: css notranslate">/* Definiert das Aussehen der Tabelle */ +table { + border-width: 3px; + background-color: #52E396; +} + +tr, td { + padding: 2px; +} + +/* border-style Beispielklassen */ +.b1 { border-style: none; } +.b2 { border-style: hidden; } +.b3 { border-style: dotted; } +.b4 { border-style: dashed; } +.b5 { border-style: solid; } +.b6 { border-style: double; } +.b7 { border-style: groove; } +.b8 { border-style: ridge; } +.b9 { border-style: inset; } +.b10 { border-style: outset; }</pre> + +<h4 id="Ausgabe">Ausgabe</h4> + +<p>{{EmbedLiveSample('Tabelle_mit_allen_Eigenschaftswerten', 300, 200)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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-style', 'border-style')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>2-, 3- und 4-Wert-Syntaxen hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.border-style")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Die Rahmen-bezogenen Kurzschreibweise CSS Eigenschaften: {{cssxref("border")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-radius")}}</li> +</ul> |