W3.CSS Granice
Mam granice.
Mam tylko lewą granicę.
Mam zieloną górną i dolną ramkę.
Mam niebieskie obramowania.
Czerwona ramka, która zmienia kolor na zielony po najechaniu.
W3.CSS Klasy graniczne
W3.CSS zapewnia następujące klasy graniczne:
| Klasa | Definiuje |
|---|---|
| w3-granica | Dodaje obramowania (góra, prawo, dół, lewo) do elementu |
| w3-obramowanie-góra | Dodaje górną granicę do elementu |
| w3-obramowanie-prawo | Dodaje prawe obramowanie do elementu |
| w3-obramowanie-dół | Dodaje dolną granicę do elementu |
| w3-obramowanie-lewo | Dodaje lewą ramkę do elementu |
| w3-granica-0 | Usuwa wszystkie granice |
| w3-obramowanie- kolor | Wyświetla obramowanie w określonym kolorze (np. czerwony, niebieski itp.) |
| w3-hover-border- color | Dodaje unoszący się kolor obramowania |
| w3-dolny pasek | Dodaje grubą dolną granicę do elementu |
| w3-lewy pasek | Dodaje grubą lewą ramkę do elementu |
| w3-prawy pasek | Dodaje grubą prawą ramkę do elementu |
| w3-górny pasek | Dodaje grubą górną ramkę do elementu |
Dodawanie obramowań
Klasy w3-border służą do dodawania obramowań do dowolnego elementu HTML:
Mam granice.
Mam tylko lewą granicę.
Mam obramowanie górne i dolne.
Przykład
<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>
Kolory obramowania
Klasy w3-border -color służą do dodawania kolorów do obramowań:
Mam czerwone obramowania.
Mam niebieską lewą ramkę.
Mam zieloną górną i dolną ramkę.
Mam czerwoną lewą ramkę i jasnoczerwony kolor tła.
Przykład
<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>
Zaokrąglone granice
Aby dodać zaokrąglone obramowania, dodaj jedną z klas rozmiaru w3 round :
Mam normalne granice.
Mam małe zaokrąglone obramowania.
Mam zaokrąglone granice.
Mam duże zaokrąglone obramowania.
Mam bardzo duże zaokrąglone obramowania.
Mam bardzo duże zaokrąglone obramowania.
Przykład
<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>
Grube obramowania
Klasy w3 -topbar , w3-bottombar , w3-leftbar i w3-rightbar służą do dodawania grubych obramowań do elementu:
Przykład
<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>
Unoszące się granice
Klasy w3-hover-border- color zmieniają kolor obramowania po najechaniu myszą:
Ramka, która zmienia kolor na czerwony po najechaniu.
Czerwona ramka, która zmienia kolor na zielony po najechaniu.
Przykład
<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>
Przykład
<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>
Grube białe (niewidoczne) obramowanie, które po najechaniu kursorem zmienia kolor na zielony.
Grube białe (niewidoczne) obramowanie, które po najechaniu kursorem zmienia kolor na czarny.
Przykład
<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>