So verwenden Sie den CSS-Rahmen

Wie man das Rahmenattribut des CSS-Rahmens verwendet, welche Attribute der Rahmen hat und wie man die Breite, Farbe, gestrichelte Linie, durchgezogene Linie und andere Stile des Objektrahmens steuert. Wir werden es Ihnen im Detail vorstellen Dieser Artikel

CSS-Rand ist CSS-Rand. Randstilfarbe, Randstil, Rahmenbreite, Syntaxstruktur und Anwendungsfall-Tutorial

CSS-Rand-Grundkenntnisse

CSS-Rand ist CSS border ist ein Kontrollobjekt. Grenzlinienbreite, Farbe, gepunktete Linie, durchgezogene Linie und andere Stil-CSS-Eigenschaften

HTML-Tabelle Kontrollrahmen:

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.

Vier Ränder

border-left legt den linken Randstil fest.

border-right legt den rechten Rand fest Der Rahmenstil wird separat festgelegt.

border-top Legt den oberen Rand fest. Im Allgemeinen wird der obere Randstil separat festgelegt.

border-bottom Im Allgemeinen wird der untere Rahmenstil separat festgelegt. Manchmal kann der Rahmenstil auch als CSS-Unterstreichungseffekt angewendet werden.

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

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

Legen Sie einen 1 Pixel großen blauen festen Rahmen für das div5-Objekt fest Box

Drei Rahmenstile

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

Randfarbe: border-color:#000

Randstärke (Breite): border-width: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.

border border style: border-style:solid

Border style-Werte 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 Abkürzungsform

1. 1 Pixel schwarzer gepunkteter oberer Rand

border-top:1px dashed #000

2. 1 Pixel schwarze durchgezogene Linie unterer Rand

border-bottom:1px solid #000

3. 1 Pixel schwarze gepunktete Linie linker Rand

border-left:1px dashed #000

4. 1 Pixel schwarze durchgezogene Linie, rechter Rand

border-right:1px solid #000

Häufig empfohlene Rahmenstile

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

Durchgezogener Rand: einfarbig

Border:1px solid #000 Stellen Sie das Objekt auf 1px (Pixel) ein. Dicker, durchgehender schwarzer Rand.

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 grafisches Tutorial zur Optimierung des Randrandstils

CSS-Randanwendungs-Fallcode

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

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

HTML-Code entsprechendes Fragment:

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

CSS-Rahmenzusammenfassung

Wir verwenden DIV-CSS, um den Rahmenstil festzulegen Im Allgemeinen verwenden wir die Abkürzung Ausdruck , um den Objektrahmenstil festzulegen, 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;.

11. Drei Seiten haben Ränder, aber eine Seite hat keine Einstellungsfähigkeiten

Beispielsweise gibt es Ränder links und rechts unten und der Stil ist ein schwarzer, 1PX breiter, fester Rand, aber es gibt ihn kein Rand oben.

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.

Es gibt so viele Möglichkeiten, CSS-Rahmen zu verwenden. Freunde, die sie benötigen, können sie auch weiterhin auf andere Updates auf dieser Website achten.

Verwandte Lektüre:

So fetten Sie Text in CSS ein

So legen Sie das Randattribut von CSS fest

So verwenden Sie DIV+CSS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den CSS-Rahmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!