W3.Confini CSS
Ho dei confini.
Ho solo un bordo sinistro.
Ho un bordo superiore e inferiore verde.
Ho i bordi blu.
Bordo rosso che diventa verde al passaggio del mouse.
Classi di confine W3.CSS
W3.CSS fornisce le seguenti classi di confine:
| Classe | Definisce |
|---|---|
| bordo w3 | Aggiunge bordi (in alto, a destra, in basso, a sinistra) a un elemento |
| w3-bordo-alto | Aggiunge un bordo superiore a un elemento |
| w3-bordo-destra | Aggiunge un bordo destro a un elemento |
| w3-bordo-fondo | Aggiunge un bordo inferiore a un elemento |
| w3-bordo-sinistra | Aggiunge un bordo sinistro a un elemento |
| w3-bordo-0 | Rimuove tutti i bordi |
| w3-bordo- colore | Visualizza il bordo in un colore specificato (come rosso, blu, ecc.) |
| w3-hover-border- colore | Aggiunge un colore del bordo fluttuante |
| w3-bassa | Aggiunge un bordo inferiore spesso a un elemento |
| w3-barra sinistra | Aggiunge un bordo sinistro spesso a un elemento |
| w3-barra destra | Aggiunge un bordo destro spesso a un elemento |
| w3-barra superiore | Aggiunge un bordo superiore spesso a un elemento |
Aggiunta di bordi
Le classi w3-border vengono utilizzate per aggiungere bordi a qualsiasi elemento HTML:
Ho dei confini.
Ho solo un bordo sinistro.
Ho i bordi superiore e inferiore.
Esempio
<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>
Colori del bordo
Le classi w3-border -color vengono utilizzate per aggiungere colori ai bordi:
Ho i bordi rossi.
Ho un bordo sinistro blu.
Ho un bordo superiore e inferiore verde.
Ho un bordo sinistro rosso e un colore di sfondo rosso pallido.
Esempio
<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>
Bordi arrotondati
Per aggiungere bordi arrotondati, aggiungi una delle classi w3-round- size :
Ho dei confini normali.
Ho piccoli bordi arrotondati.
Ho i bordi arrotondati.
Ho grandi bordi arrotondati.
Ho xlarge bordi arrotondati.
Ho xxlarge bordi arrotondati.
Esempio
<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>
Bordi spessi
Le classi w3-topbar , w3-bottombar , w3-leftbar e w3-rightbar vengono utilizzate per aggiungere bordi spessi a un elemento:
Esempio
<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>
Confini fluttuanti
Le classi w3-hover-border- color cambiano il colore del bordo al passaggio del mouse:
Bordo che diventa rosso al passaggio del mouse.
Bordo rosso che diventa verde al passaggio del mouse.
Esempio
<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>
Esempio
<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>
Bordo bianco spesso (invisibile) che diventa verde al passaggio del mouse.
Bordo bianco spesso (invisibile) che diventa nero al passaggio del mouse.
Esempio
<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>