W3.CSS

W3.CSS ГЛАВНАЯ Введение в W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS W3.CSS Границы Карточки W3.CSS W3.CSS по умолчанию W3.CSS-шрифты W3.CSS Google Текст W3.CSS W3.CSS Раунд W3.CSS заполнение Поля W3.CSS W3.CSS Отображение Кнопки W3.CSS Примечания W3.CSS W3.CSS Цитаты Оповещения W3.CSS W3.CSS-таблицы Списки W3.CSS Изображения W3.CSS Входные данные W3.CSS Значки W3.CSS W3.CSS-теги Иконки W3.CSS W3.CSS Отзывчивый Макет W3.CSS W3.CSS-анимации W3.CSS эффекты W3.CSS бары Выпадающие списки W3.CSS Аккордеоны W3.CSS W3.CSS-навигация Боковая панель W3.CSS Вкладки W3.CSS W3.CSS Пагинация Индикаторы выполнения W3.CSS Слайд-шоу W3.CSS W3.CSS Модальный Подсказки W3.CSS W3.CSS сетка W3.CSS-код W3.CSS-фильтры Тенденции W3.CSS Случай W3.CSS W3.CSS Материал Проверка W3.CSS Версии W3.CSS W3.CSS для мобильных устройств

Цвета W3.CSS

Цветовые классы W3.CSS W3.CSS цветной материал W3.CSS цветной плоский интерфейс W3.CSS Цветной интерфейс Metro W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Цветовая мода Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов W3.CSS

Веб-строительство

Веб-введение Веб-HTML Веб-CSS Веб-JavaScript Веб-макет Веб-группа Веб-кейтеринг Интернет-ресторан Веб-архитектор

Примеры

Примеры W3.CSS Демонстрации W3.CSS Шаблоны W3.CSS

использованная литература

Справочник по W3.CSS W3.CSS Загрузки

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>