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:
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!
