CSS -Randseiten
CSS Border - Einzelne Seiten
Aus den Beispielen auf den vorherigen Seiten haben Sie gesehen, dass es möglich ist, für jede Seite einen anderen Rand festzulegen.
In CSS gibt es auch Eigenschaften zum Angeben der einzelnen Ränder (oben, rechts, unten und links):
Beispiel
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Ergebnis:
Different Border Styles
Das obige Beispiel liefert das gleiche Ergebnis wie dieses:
Beispiel
p {
border-style: dotted solid;
}
Also, hier ist, wie es funktioniert:
Wenn die border-styleEigenschaft vier Werte hat:
- Border-Stil: gepunktet durchgezogen doppelt gestrichelt;
- Der obere Rand ist gepunktet
- rechte Grenze ist fest
- Der untere Rand ist doppelt
- der linke Rand ist gestrichelt
Wenn die border-styleEigenschaft drei Werte hat:
- Bordürenstil: gepunktetes durchgehendes Doppel;
- Der obere Rand ist gepunktet
- rechte und linke Ränder sind solide
- Der untere Rand ist doppelt
Wenn die border-styleEigenschaft zwei Werte hat:
- Rahmenstil: gepunkteter Vollton;
- obere und untere Ränder sind gepunktet
- rechte und linke Ränder sind solide
Wenn die border-styleEigenschaft einen Wert hat:
- Rahmenstil: gepunktet;
- alle vier Grenzen sind gepunktet
Beispiel
/* 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;
}
Die border-styleEigenschaft wird im obigen Beispiel verwendet. Es funktioniert aber auch mit
border-width
und border-color.