W3.CSS- Grenzen
Ich habe Grenzen.
Ich habe nur einen linken Rand.
Ich habe eine grüne obere und untere Grenze.
Ich habe blaue Ränder.
Roter Rand, der beim Hover grün wird.
W3.CSS Border-Klassen
W3.CSS bietet die folgenden Grenzklassen:
| Klasse | Definiert |
|---|---|
| w3-Grenze | Fügt Rahmen (oben, rechts, unten, links) zu einem Element hinzu |
| w3-Rand-oben | Fügt einem Element einen oberen Rand hinzu |
| w3-Grenze-rechts | Fügt einem Element einen rechten Rand hinzu |
| w3-Rand-unten | Fügt einem Element einen unteren Rand hinzu |
| w3-Rand-links | Fügt einem Element einen linken Rand hinzu |
| w3-Grenze-0 | Entfernt alle Grenzen |
| w3 - Randfarbe | Zeigt den Rahmen in einer bestimmten Farbe an (z. B. rot, blau usw.) |
| w3-hover-border- color | Fügt eine schwebende Randfarbe hinzu |
| w3-untere Leiste | Fügt einem Element einen dicken unteren Rand hinzu |
| w3-linke Leiste | Fügt einem Element einen dicken linken Rand hinzu |
| w3-rechte Leiste | Fügt einem Element einen dicken rechten Rand hinzu |
| w3-topbar | Fügt einem Element einen dicken oberen Rand hinzu |
Rahmen hinzufügen
Die w3-border- Klassen werden verwendet, um jedem HTML-Element Rahmen hinzuzufügen:
Ich habe Grenzen.
Ich habe nur einen linken Rand.
Ich habe obere und untere Ränder.
Beispiel
<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>
<div class="w3-panel w3-border-left">
<p>I have only a left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>
Rahmenfarben
Die Klassen w3-border -color werden verwendet, um Rahmen mit Farben zu versehen:
Ich habe rote Ränder.
Ich habe einen blauen linken Rand.
Ich habe eine grüne obere und untere Grenze.
Ich habe einen roten linken Rand und eine hellrote Hintergrundfarbe.
Beispiel
<div class="w3-panel w3-border w3-border-red">
<p>I have red borders.</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>I have a blue left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>I have a green top and bottom border.</p>
</div>
Abgerundete Ränder
Um abgerundete Ränder hinzuzufügen, fügen Sie eine der Klassen w3-round -size hinzu :
Ich habe normale Grenzen.
Ich habe kleine abgerundete Ränder.
Ich habe abgerundete Ränder.
Ich habe große abgerundete Ränder.
Ich habe xlarge abgerundete Ränder.
Ich habe xxlarge abgerundete Ränder.
Beispiel
<div class="w3-panel w3-border">
<p>My borders are normal.</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>My borders are rounded (small).</p>
</div>
<div class="w3-panel
w3-border w3-round">
<p>My borders are rounded.</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>I have
large rounded borders.</p>
</div>
<div class="w3-panel w3-border
w3-round-xlarge">
<p>I have xlarge rounded borders.</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>I have
xxlarge rounded borders.</p>
</div>
Dicke Ränder
Die Klassen w3-topbar , w3-bottombar , w3-leftbar und w3-rightbar werden verwendet, um einem Element dicke Rahmen hinzuzufügen:
Beispiel
<div class="w3-panel w3-leftbar">
<p>I have a thick left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
<p>I have a thick blue left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>I have a thick blue left border and a pale-blue background color.</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>I have a thick red top and bottom border and a pale-red background color.</p>
</div>
Schwebbare Grenzen
Die w3-hover-border- color - Klassen ändern die Farbe des Rahmens bei Mouseover:
Rahmen, der beim Hover rot wird.
Roter Rand, der beim Hover grün wird.
Beispiel
<div class="w3-panel w3-border w3-hover-border-red">
<p>Border that turns red on hover</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>Red border that turns green on hover</p>
</div>
Beispiel
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>Thick (invisible) left border that turns green on hover.</p>
</div>
<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>Thick (invisible) bottom border that turns green on hover.</p>
</div>
Dicker weißer (unsichtbarer) Rand, der beim Bewegen der Maus grün wird.
Dicker weißer (unsichtbarer) Rand, der beim Schweben schwarz wird.
Beispiel
<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
<p>Thick (invisible) border that turns green on hover.</p>
</div>
<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
<p>Thick (invisible) border that turns black on hover.</p>
</div>