CSS-Ränder aller Seiten

CSS-Rahmen - Einzellige Rahmung

In einem Beispiel des vorherigen Kapitels haben Sie gesehen, dass man für jede Seite unterschiedliche Rahmen festlegen kann.

In CSS gibt es einige Attribute, die zur Festlegung jeder Rahmen (oberen, rechten, unteren und linken) verwendet werden können:

Beispiel

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Ergebnis:

Verschiedene Rahmenstile

Selbst ausprobieren

Verschiedene Rahmenstile

Das Ergebnis des obigen Beispiels ist gleich:

Beispiel

p {
  border-style: gepunktet fest;
}

Selbst ausprobieren

Sein Arbeitsprinzip ist so:

Wenn border-style Die Eigenschaft ist auf vier Werte eingestellt:

border-style: gepunktet fest doppelte gestrichelt;

  • Der obere Rahmen ist eine gestrichelte Linie
  • Der rechte Rahmen ist eine dicke Linie
  • Der untere Rahmen ist eine doppelte Linie
  • Der linke Rahmen ist eine gestrichelte Linie

Wenn border-style Die Eigenschaft ist auf drei Werte eingestellt:

border-style: gepunktet fest doppelte;

  • Der obere Rahmen ist eine gestrichelte Linie
  • rechte und linke Rahmen sind fest
  • Der untere Rahmen ist eine doppelte Linie

Wenn border-style Eigenschaft werden zwei Werte gesetzt:

border-style: gepunktet fest;

  • obere und untere Rahmen sind gepunktet
  • rechte und linke Rahmen sind fest

Wenn border-style Eigenschaft wird ein Wert gesetzt:

border-style: gepunktet;

  • Alle vier Kanten sind gepunktet

Beispiel

/* Vier Werte */
p {
  border-style: gepunktet fest doppelte gestrichelt; 
}
/* Drei Werte */
p {
  border-style: gepunktet fest doppelte; 
}
/* Zwei Werte */
p {
  border-style: gepunktet fest; 
}
/* Ein Wert */
p {
  border-style: gepunktet; 
}

Selbst ausprobieren

wurde im obigen Beispiel verwendet border-style Eigenschaft. Aber border-width und border-color Gilt ebenfalls.