Anhand der Beispiele auf den vorherigen Seiten haben Sie gesehen, dass es möglich ist, a anzugeben unterschiedlicher Rand für jede Seite.
In CSS gibt es auch Eigenschaften zum Festlegen der einzelnen Ränder (oben, rechts, unten und links):
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}Ergebnis :
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>
</body>
</html>
Das obige Beispiel liefert das gleiche Ergebnis wie dieses:
p { border-style: dotted solid;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>
</body>
</html>
So funktioniert es also:
Wenn die Eigenschaft class="w3-codespan">border-style vier Werte hat:
Rahmenstil: gepunktet, durchgezogen, doppelt gestrichelt;
Der obere Rand ist gepunktet
Der rechte Rand ist durchgehend
Der untere Rand ist doppelt
Der linke Rand ist gestrichelt
Wenn die Eigenschaft class="w3-codespan">border-style drei Werte hat:
Rahmenstil: gepunktetes, durchgezogenes Doppel;
Der obere Rand ist gepunktet
Der rechte und linke Rand sind durchgehend
Der untere Rand ist doppelt
Wenn die Eigenschaft class="w3-codespan">border-style zwei Werte hat:
Rahmenstil: gepunktet durchgezogen;
Die oberen und unteren Ränder sind gepunktet
Der rechte und linke Rand sind durchgehend
Wenn die Eigenschaft class="w3-codespan">border-style einen Wert hat:
Rahmenstil: gepunktet;
alle vier Ränder sind gepunktet
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* Four values */
p.four {
border-style: dotted solid double dashed;
}
/* Three values */
p.three {
border-style: dotted solid double;
}
/* Two values */
p.two {
border-style: dotted solid;
}
/* One value */
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>
</body>
</html>
Im obigen Beispiel wird die Eigenschaft class="w3-codespan">border-style verwendet. Es funktioniert jedoch auch mit class="w3-codespan">Rahmenbreite und class="w3-codespan">border-color.