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>
