Erstellen gepunkteter Webseitenlinien mit Rahmenattribut in CSS

In diesem Artikel wird hauptsächlich die gepunktete Linie (wie das Border-Attribut verwendet wird) in der CSS-Produktion von Webseiten vorgestellt.

Die gepunktete Linie zur Randsteuerung des Border-Attributs finden Sie hier . Die unten konfigurierte CSS-Höhe und CSS-Breite beträgt 350 Pixel.

1. Gepunktete Ränder auf vier Seiten

Rand: 1px gestrichelter #000; schwarzer gepunkteter Rand

CSS-Code:

rrree

Html-Code: Ich habe einen schwarzen gepunkteten Rand auf vier Seiten

Hier ist die Abkürzung für die Konfiguration des Randes. Der Hackhome-Selektor hat einen 1 Pixel großen schwarzen gepunkteten Rand auf vier Seiten

2. Gepunktete Linie links:

CSS-Code:

.hackhome{border:1px dashed #000; height:50px;width:350px}

Html-Code: Ich habe links einen schwarzen gepunkteten Rand

Hier konfiguriere ich einen schwarzen gepunkteten Rand die linke Seite

3. Gepunktete Linie auf der rechten Seite:

CSS-Code:

 .hackhome-1{border-left:1px dashed #000; height:50px;width:350px}

Html-Code: Ich habe einen schwarzen gepunkteten Rand auf der rechten Seite

Hier habe ich einen schwarzen gepunkteten Rand auf der rechten Seite konfiguriert

4. Oben Die Seite (oben) ist eine gepunktete Linie:

CSS-Code:

 .hackhome-2{border-right:1px dashed #000; height:50px;width:350px}

Html-Code: Meine Oberseite ist ein schwarzer gepunkteter Rand

Die Oberseite (oberer Rand) ist hier konfiguriert. Schwarzer gepunkteter Rand

5. Der untere Rand (unterer Rand) ist gepunktet:

CSS-Code:

.hackhome-3{border-top:1px dashed #000; height:50px;width:350px}

Html-Code: Mein unterer Rand ist ein schwarzer gepunkteter Rand

Hier ist ein schwarzer gepunkteter Rand auf einer Seite der Unterseite (untere Linie) konfiguriert

6. Eine Seite ist nicht gepunktet und die anderen drei Seiten sind gepunktet

Der rechte Rand ist nicht gepunktet und hat keinen Rand, die anderen drei Seiten sind schwarz gepunktete Ränder

CSS-Code:

.hackhome-4{border-bottom:1px dashed #000; height:50px;width:350px}

Html-Code: Mein rechter Rand hat keinen Rand und die anderen drei Seiten sind schwarze gepunktete Ränder. Beispiel

Hier konfigurieren Sie zunächst das Objekt mit schwarzen 1px-gepunkteten Rändern auf allen vier Seiten , und konfigurieren Sie dann eine Seite mit 0. Dies entspricht der Konfiguration der Randattribute für gepunktete Linien auf drei Seiten, achten Sie hier jedoch auf die Reihenfolge vor und nach der Konfiguration der Randattribute

Das Obige ist Der gesamte Inhalt von Wir hoffen, dass dieser Artikel für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie CSS Das Übergangsattribut implementiert das WeChat-Applet-Widget mit Animationsanzeige

Wie Webpack CSS trennt und separat verpackt

Das obige ist der detaillierte Inhalt vonErstellen gepunkteter Webseitenlinien mit Rahmenattribut in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!