Teilen Sie den Beispielcode zum Hinzufügen eines Rahmenstils zu einem Div

Wie füge ich einem Div einen Rahmenstil hinzu?

Es ist sehr einfach, der Div-Box einen Rahmenstil hinzuzufügen, indem Sie einfach den Rahmenplattenstil verwenden.

1. Gepunktete und durchgezogene Ränder – OBEN

Rand gepunkteter Stil: gestrichelt
Rahmenimplementierungsstil: durchgezogen

border:1px dashed #000

bedeutet, dass die Breite des Objektrahmens auf 1 Pixel eingestellt wird Der schwarze gepunktete Rand

border:1px solid #000

bedeutet, dass die Objektrandbreite auf 1 Pixel eingestellt wird, um einen schwarzen Rand zu erhalten

2. Fügen Sie oben einen Rand hinzu das Div – TOP

Wir fügen einen 1 Pixel großen schwarzen Rand am oberen Rand des Div hinzu

div{border-top:1px solid #000}

3. Fügen Sie einen Rand am unteren Rand des Div hinzu – TOP

Fügen Sie einen 2 Pixel großen gepunkteten roten Rand am unteren Rand des Div-Felds hinzu.

div{border-bottom:2px dashed #F00}

4. Fügen Sie einen Rand an der linken Seite des Div-Felds hinzu – OBEN

Geben Sie einen CSS-Namen für die Auswahl an. .divcss5" und fügen Sie einen blauen 1-Pixel-Vollrahmen auf der linken Seite des Felds hinzu

.divcss5{ border-left:1px solid #00F}

DIV-Code:

<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>

5. Fügen Sie einen Rahmen auf der rechten Seite des Felds hinzu div - TOP

Fügen Sie einen 1 Pixel großen roten festen Rahmen auf der rechten Seite des div-Objekts hinzu

div{ border-right:1px solid #F00}

6 , Fügen Sie Ränder oben und unten im Feld hinzu - TOP

Fügen Sie 1 Pixel oben und unten im Feld hinzu, um einen schwarzen Rand zu erhalten

div{border-top:1px solid #000;border-bottom:1px solid #000}

7. Fügen Sie Ränder auf der linken und rechten Seite des Div-Felds hinzu – OBEN

Ränder hinzufügen Fügen Sie auf der linken und rechten Seite des Felds einen gepunkteten grünen Rand mit 2 Pixeln hinzu.

div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}

8. Fügen Sie einen Rand zu den vier Seiten des Div hinzu – OBEN ein DIV, um einen schwarzen Rand zu erreichen

Das obige ist der detaillierte Inhalt vonTeilen Sie den Beispielcode zum Hinzufügen eines Rahmenstils zu einem Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!