W3.CSS- grenzen
Ik heb grenzen.
Ik heb alleen een linkerrand.
Ik heb een groene boven- en onderrand.
Ik heb blauwe randen.
Rode rand die groen wordt bij zweven.
W3.CSS-grensklassen
W3.CSS biedt de volgende grensklassen:
| Klas | definieert |
|---|---|
| w3-rand | Voegt randen (boven, rechts, onder, links) toe aan een element |
| w3-border-top | Voegt een bovenrand toe aan een element |
| w3-grens-rechts | Voegt een rechterrand toe aan een element |
| w3-border-onder | Voegt een onderrand toe aan een element |
| w3-rand-links | Voegt een linkerrand toe aan een element |
| w3-border-0 | Verwijdert alle randen |
| w3-rand- kleur | Geeft de rand weer in een bepaalde kleur (zoals rood, blauw, enz.) |
| w3-hover-border- kleur | Voegt een zwevende randkleur toe |
| w3-onderbalk | Voegt een dikke onderrand toe aan een element |
| w3-linkerbalk | Voegt een dikke linkerrand toe aan een element |
| w3-rechterbalk | Voegt een dikke rechterrand toe aan een element |
| w3-topbalk | Voegt een dikke bovenrand toe aan een element |
Randen toevoegen
De w3-borderklassen worden gebruikt om randen toe te voegen aan elk HTML-element:
Ik heb grenzen.
Ik heb alleen een linkerrand.
Ik heb een boven- en onderrand.
Voorbeeld
<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>
Randkleuren
De klassen w3-border -color worden gebruikt om kleuren aan randen toe te voegen:
Ik heb rode randen.
Ik heb een blauwe linkerrand.
Ik heb een groene boven- en onderrand.
Ik heb een rode linkerrand en een lichtrode achtergrondkleur.
Voorbeeld
<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>
Afgeronde randen
Om afgeronde randen toe te voegen, voegt u een van de w3-round -size klassen toe:
Ik heb normale grenzen.
Ik heb kleine ronde randen.
Ik heb afgeronde randen.
Ik heb grote ronde randen.
Ik heb grote ronde randen.
Ik heb xxgrote ronde randen.
Voorbeeld
<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>
Dikke randen
De klassen w3-topbar , w3-bottombar , w3-leftbar en w3-rightbar worden gebruikt om dikke randen aan een element toe te voegen:
Voorbeeld
<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>
Zweefbare randen
De klassen w3-hover- border- color veranderen de kleur van de rand bij mouse-over:
Rand die rood wordt bij zweven.
Rode rand die groen wordt bij zweven.
Voorbeeld
<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>
Voorbeeld
<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>
Dikke witte (onzichtbare) rand die groen wordt bij zweven.
Dikke witte (onzichtbare) rand die zwart wordt bij zweven.
Voorbeeld
<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>