Bordures W3.CSS
J'ai des frontières.
Je n'ai qu'un bord gauche.
J'ai une bordure verte en haut et en bas.
J'ai des bordures bleues.
Bordure rouge qui devient verte au survol.
Classes de bordure W3.CSS
W3.CSS fournit les classes de bordure suivantes :
| Classer | Définit |
|---|---|
| bordure w3 | Ajoute des bordures (haut, droite, bas, gauche) à un élément |
| w3-border-top | Ajoute une bordure supérieure à un élément |
| w3-bordure-droite | Ajoute une bordure droite à un élément |
| w3-bordure-bas | Ajoute une bordure inférieure à un élément |
| w3-bordure-gauche | Ajoute une bordure gauche à un élément |
| w3-border-0 | Supprime toutes les bordures |
| w3-border- color | Affiche la bordure dans une couleur spécifiée (comme le rouge, le bleu, etc.) |
| w3-hover-border- color | Ajoute une couleur de bordure flottante |
| w3-bottombar | Ajoute une bordure inférieure épaisse à un élément |
| w3-barre gauche | Ajoute une bordure gauche épaisse à un élément |
| w3-barre droite | Ajoute une bordure droite épaisse à un élément |
| w3-topbar | Ajoute une bordure supérieure épaisse à un élément |
Ajout de bordures
Les classes w3-border sont utilisées pour ajouter des bordures à n'importe quel élément HTML :
J'ai des frontières.
Je n'ai qu'un bord gauche.
J'ai des bordures en haut et en bas.
Exemple
<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>
Couleurs des bordures
Les classes w3-border -color sont utilisées pour ajouter des couleurs aux bordures :
J'ai des bordures rouges.
J'ai une bordure bleue à gauche.
J'ai une bordure verte en haut et en bas.
J'ai une bordure gauche rouge et une couleur de fond rouge pâle.
Exemple
<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>
Bordures arrondies
Pour ajouter des bordures arrondies, ajoutez l'une des classes w3-round -size :
J'ai des frontières normales.
J'ai de petites bordures arrondies.
J'ai des bordures arrondies.
J'ai de grandes bordures arrondies.
J'ai de grandes bordures arrondies.
J'ai des bordures arrondies xxlarges.
Exemple
<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>
Bordures épaisses
Les classes w3-topbar , w3-bottombar , w3-leftbar et w3-rightbar sont utilisées pour ajouter des bordures épaisses à un élément :
Exemple
<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>
Frontières flottantes
Les classes w3-hover-border- color changent la couleur de la bordure au passage de la souris :
Bordure qui devient rouge au survol.
Bordure rouge qui devient verte au survol.
Exemple
<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>
Exemple
<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>
Bordure blanche épaisse (invisible) qui devient verte au survol.
Bordure blanche épaisse (invisible) qui devient noire au survol.
Exemple
<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>