Legen Sie den Rahmenstil fest

Das Attribut „border-style“ legt den Stil der vier Ränder eines Elements fest. Diese Eigenschaft kann einen bis vier Werte haben.

Beispiel:

border-style:dotted solid double dashed;

● Der obere Rand ist Gepunktet

● Der rechte Rand ist eine durchgezogene Linie

● Unten Der Rand ist eine doppelte Linie

● Der linke Rand ist eine gepunktete Linie

border-style:dotted solid double;

● Der obere Rand ist eine gepunktete Linie

● Der rechte und linke Rand sind durchgezogene Linien

● Der untere Rand ist eine Doppellinie

border-style:dotted solid;

● Der obere und untere Rand sind gepunktet

● Der rechte und linke Rand sind durchgezogene Linien

border-style:dotted;

● Alle 4 Ränder sind gepunktet

Einstellbare Attributwerte:

keine: Definieren Sie keinen Rand.

versteckt: Das Gleiche wie „keine“. Außer bei Anwendung auf Tabellen, bei denen „hidden“ zur Lösung von Randkonflikten verwendet wird.

gepunktet: Gepunkteten Rand definieren. Wird in den meisten Browsern als durchgezogene Linie dargestellt.

gestrichelt: Gestrichelte Linie definieren. Wird in den meisten Browsern als durchgezogene Linie dargestellt.

durchgezogen: Definieren Sie eine durchgezogene Linie.

double: Definiert eine Doppellinie. Die Breite der Doppellinie entspricht dem Wert von border-width.

Groove: Definieren Sie den 3D-Rillenrand. Der Effekt hängt vom Wert von border-color ab.

Kamm: Definieren Sie den 3D-Kammrand. Der Effekt hängt vom Wert von border-color ab.

Einfügung: Definieren Sie den 3D-Einfügungsrand. Der Effekt hängt vom Wert von border-color ab.

Anfang: Definieren Sie den 3D-Anfangsrand. Der Effekt hängt vom Wert von border-color ab.

inherit: Gibt an, dass der Rahmenstil vom übergeordneten Element geerbt werden soll.

Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置边框样式</title> <style> p.none {border-style:none;} 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.hidden {border-style:hidden;} </style> </head> <body> <p class="none">无边框。</p> <p class="dotted">虚线边框。</p> <p class="dashed">虚线边框。</p> <p class="solid">实线边框。</p> <p class="double">双边框。</p> <p class="groove"> 凹槽边框。</p> <p class="ridge">垄状边框。</p> <p class="inset">嵌入边框。</p> <p class="outset">外凸边框。</p> <p class="hidden">隐藏边框。</p> </body> </html>
einreichenCode zurücksetzen