Zusammenfassung der Verwendung von Rahmenattributen in CSS

Freunde, die CSS noch nicht kennen, denken vielleicht, dass das Attribut Rahmen nur eine einfache Rahmenzeichnung ist. Tatsächlich steuert der Rahmen die Rahmenbreite, die Farbe, die gestrichelte Linie, die durchgezogene Linie und andere Stile des Objekts. Sie können einen einzelnen Rand oder alle Ränder steuern. Mit dem Border-Attribut können weitere Effekte erzeugt werden. In CSS können Sie mithilfe der Rahmensyntax verschiedene Designänderungen am Rahmen vornehmen, z. B. die Breite, den Stil, die Farbe usw. des Rahmens festlegen. Grundsätzlich ist CSS nicht auf den Rahmen beschränkt Der Rahmen von p block oder span kann auch auf den Rand anderer Webseitenelemente angewendet werden, z. B. auf den Rand des Webseitentitels, den Rand des Bildes (img border) usw. Alle gängigen Browser werden unterstützt das CSS-Randattribut. Im Folgenden finden Sie eine ausführliche Erläuterung der Verwendung des Randattributs.

Erste kostenlose Kurse im Zusammenhang mit PHP-Chinesisch-Websites

1. Lernen Sie"HTML/CSS Quick Start" CSS-RahmenstilKurs

2. Sehen Sie sich„Geek Academy CSS- und CSS3-Video-Tutorial“ anCSS Box Model-BorderVideo-Tutorial

Grenzrandeigenschaft

1. Detaillierte Einführung in das Border-Attribut von CSS

1) border-width: unterstützt keine Prozentsätze, unterstützt Schlüsselwörter, dünn (1px), mittel (Standardwert, 3px Der Grund, warum der Standardwert 3 Pixel beträgt, liegt darin, dass der Rahmenstil nur wirksam ist, wenn der Rahmen 3 Pixel und größer ist Frucht), dick (5 Pixel)

2) Rahmenstil: Dort sind unterschiedliche Werte. Im Folgenden werden die Anwendungen verschiedener Werte analysiert. a.solid: Kann Dreiecke und Trapeze realisieren. b.dashed: Gepunktete Linie, im Chrome/Firefox-Browser Das Verhältnis der Linie beträgt 3:1 (dünn), im IE-Browser beträgt das Verhältnis 2:1 (dicht); c.dotted: gepunktete Linie, im Chrome/Firefox-Browser sind es quadratische Punkte. im IE-Browser ist es ein Punkt (Sie können Punkte verwenden, um einen abgerundeten Eckeneffekt zu erzielen); d.double: Doppellinie, Berechnungsregel, die Breite der Doppellinie ist immer gleich Der Abstand zwischen ihnen beträgt +-1, zum Beispiel 3px=1 (innen) + 1 (mittlerer Abstand) + 1 (außen). ), Anfang (äußerer Konvex), Grat (Rille)): veralteter Stil, schlechte Kompatibilität, keine Verwendungsszenarien

2. Detaillierte Erläuterung des Randattributs von CSS-Stilborder-width-Eigenschaft legt die Breite des Rahmens fest Mögliche Werte: Pixel

border-style-Eigenschaft legt den Stil des Rahmens fest Mögliche Werte: durchgezogen (gerade Linie), gestrichelt (gestrichelte Linie), gepunktet (Punktlinie)

border-color-Attribut legt die Farbe des Randes fest Mögliche Werte: Rot, #f00, #ff0000, rgb(255,0,0), transparent

border-left-Attribut Linken Rand festlegen

border-right-Eigenschaft legt den rechten Rand fest

border-top-Eigenschaft legt den oberen Rand fest

border-bottom-Eigenschaft legt den unteren Rand fest

3. Verwendung von Rändern, die Sie nicht kennen

Idee: Wenn die Unterkante parallel zur horizontalen Linie verläuft, steuern wir direkt das Seitenverhältnis, um den gewünschten Dreieckseffekt zu erzielen ; Wenn es nicht mit der horizontalen Linie übereinstimmt, wird es zu diesem Zeitpunkt komplizierter. Wir müssen das Seitenverhältnis in Kombination mit dem Transformationsattribut verwenden und in CSS3 drehen, damit unser Dreieck den gewünschten Effekt zeigt (hier ist nur eine Einführung). die Idee, nicht die konkrete Umsetzung, die beinhaltet Um etwas über Mathematik zu lernen, können Sie Baidu selbst verwenden.

4. Eine Zusammenfassung der Methode zur Verwendung des Border-Attributs von CSS zum Erstellen eines deformierten Randes

Rand bedeutet, wie der Name schon sagt, in CSS. Sie können die Rahmensyntax verwenden, um viele verschiedene Designänderungen am Rahmen vorzunehmen, z. B. die Breite, den Stil, die Farbe usw. des Rahmens festzulegen, und Sie können den Rahmen im Prinzip auch ausblenden Die Ränder von p-Blöcken oder -Bereichen können jedoch auch auf die Ränder anderer Webseitenelemente angewendet werden, z. B. auf den Rand des Webseitentitels, den Rand des Bildes (IMG-Rand) usw., der von allen gängigen Browsern unterstützt wird das CSS-Randattribut.

5. Erklärung des Grenzdreieckschattens und mehrerer Ränder

Ränder können je nach Richtung individuell eingestellt werden, nach oben, unten, links und rechts, Rand oben | border-bottom |. border-right ;

Attribute können also auch individuell festgelegt werden, border-top-width |

Einzelne Attribute können auch in Kombination geschrieben werden:

border-width: oben, rechts, unten, links; (im Uhrzeigersinn)

border-width: oben, links, unten; 🎜>Rahmenbreite: oben, unten, links;

Rahmenbreite: vier Richtungen

Rahmenfarbe kann auch so eingestellt werden; >6.

CSS: Border-Attribut

Wissen erweitern

Viele Designer haben bisher das in diesem Kapitel aufgeführte Wissen genutzt, es gibt jedoch einige Möglichkeiten, wie wir es weiter ausbauen können!

Mehrere Kanten Beim Anwenden mehrerer Kanten auf ein Element können Sie auf verschiedene Techniken zurückgreifen.

Randstil durchgezogen, gestrichelt und gepunktet sind die am häufigsten verwendeten Attributwerte für den Randstil, und es gibt mehrere andere Werte, die wir verwenden können, einschließlich Rille und Grat.

Verwandte Fragen und Antworten

1. Über die 0,5-Pixel-Einstellung des CSS-Rahmens?

2.

FireFox-Randstilausnahme

3.

Über Randbild

4 So implementieren Sie abgerundete Ecken von Rahmenbildern in CSS3

[Verwandte Empfehlungen]

1. Kostenloses PHP-Video-Tutorial für die chinesische Website:

"php.cn Dugu Jiujian (2) -CSS-Video-Tutorial》

2. Kostenloses PHP-Video-Tutorial für die chinesische Website:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von Rahmenattributen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!