W3.CSS Grense
Ek het grense.
Ek het net 'n linkergrens.
Ek het 'n groen bo- en onderrand.
Ek het blou rande.
Rooi rand wat groen word wanneer jy beweeg.
W3.CSS Grensklasse
W3.CSS verskaf die volgende grensklasse:
| Klas | Definieer |
|---|---|
| w3-grens | Voeg grense (bo, regs, onder, links) by 'n element |
| w3-border-top | Voeg 'n boonste rand by 'n element |
| w3-grens-regs | Voeg 'n regtergrens by 'n element |
| w3-grens-onder | Voeg 'n onderste rand by 'n element |
| w3-grens-links | Voeg 'n linkerrand by 'n element |
| w3-grens-0 | Verwyder alle grense |
| w3-grens- kleur | Vertoon die rand in 'n gespesifiseerde kleur (soos rooi, blou, ens.) |
| w3-sweef-grens- kleur | Voeg 'n sweefbare randkleur by |
| w3-onderste balk | Voeg 'n dik onderrand by 'n element |
| w3-linkerbalk | Voeg 'n dik linkerrand by 'n element |
| w3-regterbalk | Voeg 'n dik regterrand by 'n element |
| w3-topbalk | Voeg 'n dik boonste rand by 'n element |
Voeg grense by
Die w3-grensklasse word gebruik om grense by enige HTML-element by te voeg:
Ek het grense.
Ek het net 'n linkergrens.
Ek het bo- en ondergrense.
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>
Rand Kleure
Die w3-grens -kleur klasse word gebruik om kleure by grense te voeg:
Ek het rooi rande.
Ek het 'n blou linkerrand.
Ek het 'n groen bo- en onderrand.
Ek het 'n rooi linkerrand en 'n ligrooi agtergrondkleur.
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 grense
Om afgeronde grense by te voeg, voeg een van die w3-ronde- grootte klasse by:
Ek het normale grense.
Ek het klein afgeronde grense.
Ek het afgeronde grense.
Ek het groot afgeronde grense.
Ek het xgroot geronde rande.
Ek het xxlarge afgeronde grense.
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>
Dik grense
Die w3- topbalk , w3-bottombar , w3-leftbar , en w3-rightbar klasse word gebruik om dik grense by 'n element te voeg:
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>
Beweegbare grense
Die w3-sweef-grens-kleurklasse verander die kleur van die rand wanneer jy oor die muis beweeg:
Rand wat rooi word as jy beweeg.
Rooi rand wat groen word wanneer jy beweeg.
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>
Dik wit (onsigbare) rand wat groen word wanneer jy beweeg.
Dik wit (onsigbare) rand wat swart word as jy beweeg.
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>