Hranice W3.CSS
mám hranice.
Mám jen levý okraj.
Mám zelený horní a spodní okraj.
Mám modré okraje.
Červený okraj, který se při najetí změní na zelenou.
W3.CSS Hraniční třídy
W3.CSS poskytuje následující třídy hranic:
| Třída | Definuje |
|---|---|
| w3-hranice | Přidá ohraničení (nahoře, vpravo, dole, vlevo) k prvku |
| w3-border-top | Přidá horní ohraničení prvku |
| w3-border-right | Přidá pravé ohraničení prvku |
| w3-border-bottom | Přidá k prvku spodní ohraničení |
| w3-ohraničení-vlevo | Přidá levé ohraničení prvku |
| w3-hranice-0 | Odstraní všechny okraje |
| w3-border- color | Zobrazí ohraničení v zadané barvě (jako je červená, modrá atd.) |
| w3-hover-border- color | Přidá přechodovou barvu ohraničení |
| w3-spodní lišta | Přidá prvku tlusté spodní ohraničení |
| w3-levý panel | Přidá k prvku tlusté levé ohraničení |
| w3-pravá lišta | Přidá prvku tlusté pravé ohraničení |
| w3-horní lišta | Přidá prvku tlusté horní ohraničení |
Přidání hranic
Třídy w3-border se používají k přidání ohraničení k jakémukoli prvku HTML:
mám hranice.
Mám jen levý okraj.
Mám horní a spodní okraje.
Příklad
<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>
Barvy ohraničení
Třídy w3-border -color se používají k přidání barev k ohraničením:
Mám červené okraje.
Mám modrý levý okraj.
Mám zelený horní a spodní okraj.
Mám červený levý okraj a světle červenou barvu pozadí.
Příklad
<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>
Zaoblené hranice
Chcete-li přidat zaoblené okraje, přidejte jednu z tříd w3-round -size :
Mám normální hranice.
Mám malé zaoblené okraje.
Mám zaoblené okraje.
Mám velké zaoblené okraje.
Mám xlarge zaoblené okraje.
Mám xxlarge zaoblené okraje.
Příklad
<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>
Tlusté okraje
Třídy w3-topbar , w3-bottombar , w3-leftbar a w3-rightbar se používají k přidání tlustých okrajů k prvku:
Příklad
<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>
Vznášející se hranice
Třídy barev w3-hover-border- mění barvu okraje při přejetí myší:
Ohraničení, které se při umístění kurzoru změní na červenou.
Červený okraj, který se při najetí změní na zelenou.
Příklad
<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>
Příklad
<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>
Silný bílý (neviditelný) okraj, který se po najetí myší změní na zelenou.
Tlustý bílý (neviditelný) okraj, který při najetí myší zčerná.
Příklad
<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>