W3.CSS Межі
Я маю межі.
Я маю тільки ліву межу.
Я маю зелену верхню та нижню межу.
Я маю сині межі.
Червона межа, яка стає зеленою при наведенні.
W3.CSS Класи меж
W3.CSS надає наступні класи меж:
| Клас | Визначає |
|---|---|
| w3-border | Додає межі (зверху, справа, знизу, зліва) до елемента |
| w3-border-top | Додає верхню межу до елемента |
| w3-border-right | Додає праву межу до елемента |
| w3-border-bottom | Додає нижню межу до елемента |
| w3-border-left | Додає ліву межу до елемента |
| w3-border-0 | Видаляє всі межі |
| w3-border-color | Відображення межі вказаним кольором (наприклад, червоним, синім і т.д.) |
| w3-hover-border-color | Додає колір межі при наведенні |
| w3-bottombar | Додає товсту нижню межу до елемента |
| w3-leftbar | Додає товсту ліву межу до елемента |
| w3-rightbar | Додає товсту праву межу до елемента |
| w3-topbar | Додає товсту верхню межу до елемента |
Додавання меж
Класи w3-border використовуються для додавання меж до будь-якого елементу HTML:
Я маю межі.
Я маю тільки ліву межу.
Я маю верхню і нижню межі.
Приклад
<div class="w3-panel w3-border">
<p>Я маю межі.</p>
</div>
<div class="w3-panel w3-border-left">
<p>Я маю тільки ліву межу.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>Я маю верхню і нижню межі.</p>
</div>
Спробуйте самі »
Кольори меж
Класи w3-border-color використовуються для додавання кольорів до меж:
Я маю червоні межі.
Я маю синю ліву межу.
Я маю зелену верхню та нижню межу.
Я маю червону ліву межу і блідо-червоний колір фону.
Приклад
<div class="w3-panel w3-border w3-border-red">
<p>Я маю червоні межі.</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>Я маю синю ліву межу.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>Я маю зелену верхню і нижню межу.</p>
</div>
Спробуйте самі »
Округлі межі
Щоб додати скруглені межі, додайте один із класів w3-round-size:
Я маю звичайні межі.
Я маю маленькі скруглені межі.
Я маю округлі межі.
Я маю великі (large) округлі межі.
Я маю сильно (xlarge) скруглені межі.
Я маю дуже сильно (xxlarge) скруглені межі.
Приклад
<div class="w3-panel w3-border">
<p>Мої межі звичайні.</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>Мої межі трохи округлі (small).</p>
</div>
<div class="w3-panel w3-border w3-round">
<p>Мої межі скруглені.</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>Я маю великі (large) округлі межі.</p>
</div>
<div class="w3-panel w3-border w3-round-xlarge">
<p>Я маю сильно (xlarge) скруглені межі.</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>Я маю дуже сильно (xxlarge) скругленні межі.</p>
</div>
Товсті межі
Класи w3-topbar, w3-bottombar, w3-leftbar та w3-rightbar використовуються для додавання товстих меж до елемента:
Приклад
<div class="w3-panel w3-leftbar">
<p>Я маю товсту ліву межу.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
<p>Я маю товсту синю ліву межу.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>Я маю товсту синю ліву межу і блідо-синій колір фону.</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>Я маю товсту червону верхню і нижню межу та блідо-червоний колір фону.</p>
</div>
Межі при наведенні миші
Класи w3-hover-border-color змінюють колір межі при наведенні миші:
Межа, яка стає червоною при наведенні миші.
Червона межа, яка стає зеленою при наведенні миші.
Приклад
<div class="w3-panel w3-border w3-hover-border-red">
<p>Межа, яка стає червоною при наведенні</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>Червона межа, яка стає зеленою при наведенні</p>
</div>
Спробуйте самі »
Приклад
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>Товста (невидима) ліва межа, яка стає зеленою при наведенні миші.</p>
</div>
<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>Товста (невидима) нижня межа, яка стає зеленою при наведенні миші.</p>
</div>
Товста біла (невидима) межа, яка стає зеленою при наведенні миші.
Товста біла (невидима) межа, яка стає чорною при наведенні миші.
Приклад
<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
<p>Товста (невидима) межа, яка стає зеленою при наведенні миші.</p>
</div>
<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
<p>Товста (невидима) межа, яка стає чорною при наведенні миші.</p>
</div>
