ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

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 Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS 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-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>

Попробуйте сами »