Mit den CSS-Rahmeneigenschaften können Sie den Stil festlegen, Breite und Farbe des Randes eines Elements.
Ich habe auf allen Seiten Grenzen.
Ich habe einen roten unteren Rand.
Ich habe abgerundete Ränder.
Die Eigenschaft class="w3-codespan">border-style gibt an, welche Art von Rahmen angezeigt werden soll.
Folgende Werte sind zulässig:
class="w3-codespan">dotted- Definiert einen gestrichelten Rand
class="w3-codespan">solid- Definiert einen festen Rahmen
class="w3-codespan">double- Definiert einen doppelten Rahmen
class="w3-codespan">groove- Definiert einen 3D-Rillenrand. Der Effekt hängt vom Wert der Rahmenfarbe ab
class="w3-codespan">ridge- Definiert einen geriffelten 3D-Rand. Der Effekt hängt vom Wert der Rahmenfarbe ab
class="w3-codespan">inset- Definiert einen 3D-Einsatzrahmen. Der Effekt hängt vom Wert der Rahmenfarbe ab
class="w3-codespan">outset- Definiert einen 3D-Ausgangsrahmen. Der Effekt hängt vom Wert der Rahmenfarbe ab
class="w3-codespan">none- Definiert keinen Rand
class="w3-codespan">hidden- Definiert einen versteckten Rand
Die Eigenschaft class="w3-codespan">border-style kann einen bis vier Werte haben (z der obere Rand, der rechte Rand, der untere Rand und der linke Rand).
Demonstration der verschiedenen Bordürenstile:
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Ergebnis :
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Hinweis: Keine der ANDEREN CSS-Rahmeneigenschaften (über die Sie in den nächsten Kapiteln mehr erfahren werden) hat IRGENDEINE Auswirkung, es sei denn, die Die Eigenschaft class="w3-codespan">border-style ist festgelegt!