W3.CSS Границы
У меня есть границы.
У меня только левая граница.
У меня есть зеленая верхняя и нижняя граница.
У меня синие рамки.
Красная рамка, которая становится зеленой при наведении.
Пограничные классы W3.CSS
W3.CSS предоставляет следующие классы границ:
Класс | Определяет |
---|---|
w3-граница | Добавляет границы (сверху, справа, снизу, слева) к элементу |
w3-граница-верх | Добавляет верхнюю границу к элементу |
w3-граница справа | Добавляет правую границу к элементу |
w3-граница внизу | Добавляет нижнюю границу к элементу |
w3-граница слева | Добавляет левую границу к элементу |
w3-граница-0 | Удаляет все границы |
w3-граница- цвет | Отображает границу в указанном цвете (например, красный, синий и т. д.) |
w3-hover-border- color | Добавляет цвет рамки при наведении |
w3-нижняя панель | Добавляет толстую нижнюю границу к элементу |
w3-левая панель | Добавляет толстую левую границу к элементу |
w3-правая панель | Добавляет толстую правую границу к элементу |
w3-верхняя панель | Добавляет толстую верхнюю границу к элементу |
Добавление границ
Классы w3-border используются для добавления границ к любому элементу HTML:
У меня есть границы.
У меня только левая граница.
У меня есть верхняя и нижняя границы.
Пример
<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>
Цвета границ
Классы w3-border -color используются для добавления цветов границам:
У меня красные границы.
У меня синяя левая граница.
У меня есть зеленая верхняя и нижняя граница.
У меня красная левая граница и бледно-красный цвет фона.
Пример
<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>
Закругленные границы
Чтобы добавить закругленные границы, добавьте один из классов w3-round -size :
У меня нормальные границы.
У меня маленькие округлые края.
У меня закругленные границы.
У меня большие округлые края.
У меня большие закругленные границы.
У меня xxlarge закругленные границы.
Пример
<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>
Толстые границы
Классы w3 -topbar , w3-bottombar , w3-leftbar и w3-rightbar используются для добавления толстых границ к элементу:
Пример
<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>
Парящие границы
Классы w3-hover-border- color изменяют цвет границы при наведении курсора мыши:
Граница, которая становится красной при наведении.
Красная рамка, которая становится зеленой при наведении.
Пример
<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>
Пример
<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>
Толстая белая (невидимая) рамка, которая становится зеленой при наведении.
Толстая белая (невидимая) рамка, которая становится черной при наведении.
Пример
<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>