CSS-Webseiten-Rahmencode

CSS-Webseitenränder werden hauptsächlich mithilfe von Rändern erstellt, daher werden wir uns heute mit dem Wissen über CSS-Ränder vertraut machen. Ich hoffe, es hilft allen

CSS-Rahmen ist die CSS-Eigenschaft, die die Breite, Farbe, gestrichelte Linie, durchgezogene Linie und andere Stile des Objektrahmens steuert. Gleichzeitig können Sie das CSS-Handbuch aufrufen, um das Rahmenhandbuch anzuzeigen

DIV+CSS-Randgrenzen-Wissens-Tutorial

Html-Originalrahmen und DIV+CSS-Randvergleich

HTML-TabelleKontrollrahmen:

border="1" bordercolor="#000000"

Beschreibung: Steuern Sie die Breite des Tabellenrahmens auf 1 Pixel, die CSS-Farbe auf Schwarz, und die Standardeinstellung ist ein einfarbiger Rahmen.

Border-Randsyntax

Vier Ränder

border-left legt den linken Randstil fest.

border-right Um den rechten Randstil separat festzulegen, verwenden Sie im Allgemeinen

border-top, um den oberen Randstil separat festzulegen. unten, um den unteren Randstil festzulegen. Manchmal kann der untere Randstil als CSS-Unterstreichungseffekt angewendet werden.

Die Abkürzung für „Border“ mit dem gleichen Rand auf vier Seiten

#div{border:1px solid #00F}

Legt einen 1 Pixel großen blauen festen Rahmen für das Div-Objekt fest Box

3. Drei Rahmenstile

Normalerweise können wir die drei Attribute und Parameter des Rahmens festlegen: Breite (Dicke), Rahmenstil und Rahmenfarbe.

1), Rahmenfarbe:

:#0002), Rahmenstärke (Breite):

:1px Verwenden Sie Zahl + Einheit, um die Breite des Rahmens festzulegen, z. B. 1 Pixel (die Breite des Rahmens beträgt 1 Pixel). Der Rand muss eine positive Zahl sein, ein Wert größer als 0. Andernfalls ist die Einstellung des Rahmenstils ungültig.

3), Rahmenrandstil:

:solidDie Rahmenstilwerte lauten wie folgt:

none: Kein Rand . Unabhängig von einem angegebenen Randbreitenwert

hidden: Blendet den Rand aus. IE unterstützt nicht

gepunktete Linien: IE4+ auf der MAC-Plattform und IE5.5+ auf den WINDOWS- und UNIX-Plattformen sind gepunktete Linien. Ansonsten ist es eine durchgezogene Linie (häufig verwendet)

gestrichelt: IE4+ auf der MAC-Plattform und IE5.5+ auf der WINDOWS- und UNIX-Plattform sind gepunktete Linien. Ansonsten durchgezogene Linie (häufig verwendet)

durchgezogen: durchgezogener Rand (häufig verwendet)

doppelt: doppelter Rand. Die Summe zweier Einzellinien und deren Abstand entspricht dem angegebenen Randbreitenwert

Groove: Zeichnen Sie eine 3D-Rille entsprechend dem Wert von Randfarbe

Ridge: Zeichnen Sie einen Diamantrand entsprechend dem Wert von border-color

Einschub: Zeichnen Sie eine 3D-konkave Kante entsprechend dem Wert von border-color

Anfang: Zeichnen Sie eine 3D-konvexe Kante entsprechend dem Wert von border-color

CSS legt den linken Rand, den rechten Rand, den oberen Rand und den unteren Rand separat fest.

Schreiben Sie die separaten CSS-Stileinstellungsmethoden für den oberen, unteren, linken und rechten Rand in abgekürzter Form

1. 1 Pixel schwarzer gepunkteter oberer Rand

Rand oben: 1 Pixel gestrichelt #000

2. 1 Pixel schwarzer durchgezogener unterer Rand

Rand unten: 1 Pixel durchgezogen #000

3. 1px schwarzer gepunkteter linker Rand

border-left:1px gestrichelte #000

4. 1px schwarzer durchgezogener rechter Rand

border-right:1px solid #000

Häufig empfohlene Rahmenstile

Wir verwenden normalerweise die Rahmenstile, die mit Mainstream-Browsern kompatibel sind:

Fester Rahmen: solide

Rand:1px solide #000 Stellen Sie das Objekt auf einen dicken schwarzen, durchgehenden Rand von 1 Pixel (Pixel) ein.

Strichrand: gestrichelt

Rand:1px gestrichelt #000 Legt den 1px (Pixel) dicken schwarzen gepunkteten Rand des Objekts fest.

Verwendung von CSS-Rändern

Legen Sie den Rahmenstil des Objekts fest, legen Sie separate Stile für den oberen Rand, den unteren Rand, den linken Rand und den rechten Rand fest, um Verschönerung und Schönheit zu erzielen. Die Grenze spielt die Rolle der Segmentierung und Layoutplanung.

Abgekürztes Grafik-Tutorial zur Optimierung des Randrahmenstils

CSS-Rahmenanwendungsfallcode

Beschreibung: Um den Falleffekt zu beobachten, legen wir eine CSS-Breite von 200 Pixel und eine CSS-Höhe fest von 1 Pixel, rotes DIV-Feld mit durchgezogenem Rand

CSS-Code:

#divcss5{height:100px;width:200px;border:1px solid #F00}

<div id="divcss5">我的高度为100px,宽度为200px</div>

wird zum Festlegen des Objektrahmenstils verwendet, wodurch Code gespart und die Codefunktion vereinfacht wird. Unabhängig davon, ob ein einzelner Rahmen oder ein vierseitiger Rahmen festgelegt wird, versuchen wir, den CSS-Rahmencode abzukürzen. Dies ist die Abkürzung für CSS-Rahmenoptimierung. Häufig verwendete Attributcodes zum Festlegen von CSS-Stilen für Objekte sind: border:1px solid #000;. Zum Beispiel gibt es links und rechts unten Ränder und der Stil ist ein schwarzer, 1PX breiter, fester Rand, aber oben gibt es keinen Rand.

CSS-Code: border:1px solid #000; border-top:none;

Beachten Sie, dass die Reihenfolge von border:1px solid #000; . Da beim CSS-Lesen das Prinzip des Lesens von oben nach unten und von links nach rechts gilt, macht es keinen Sinn, zuerst den gesamten Rahmenstil festzulegen und dann den oberen Rahmen auf „none“ zu deklarieren, um den dafür erforderlichen Stil zu erreichen Beispiel. Dadurch entfällt die Notwendigkeit, die unteren, linken und rechten Einstellungen separat festzulegen, wodurch eine gewisse Menge Code eingespart wird.

Verwandte Lektüre:

Beispiel für die Verwendung von CSS zum Ausrichten beider Enden einer einzelnen Textzeile

Detailliertes Beispiel für einen Überlauf in CSS

Hyperlink-Tag in HTML

Das obige ist der detaillierte Inhalt vonCSS-Webseiten-Rahmencode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!