Как сделать контур в css

CSS Контур

Контур — это линия, которая проводится вокруг элементов ВНЕ границ, чтобы сделать элемент "выделяющимся".

CSS имеет следующие свойства контура:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Примечание: Контур отличается от границ! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывать другое содержимое. Кроме того, контур НЕ является частью размеров элемента; общая ширина и высота элемента не зависит от ширины контура.

CSS Стиль контура

Свойство outline-style определяет стиль контура и может иметь одно из следующих значений:

  • dotted — Определяет точечный контур
  • dashed — Определяет пунктирный контур
  • solid — Определяет сплошной контур
  • double — Определяет двойной контур
  • groove — Определяет 3D рифленый контур
  • ridge — Определяет 3D ребристый контур
  • inset — Определяет 3D внутренний контур
  • outset — Определяет 3D наружный контур
  • none — Определяет отсутствие контура
  • hidden — Определяет скрытый контур

В следующем примере показаны различные значения outline-style :

Пример

Демонстрация различных стилей контура:

Рифленый контур. Эффект зависит от значения цвета контура.

Ребристый контур. Эффект зависит от значения цвета контура.

Внутренний контур. Эффект зависит от значения цвета контура.

Наружный контур. Эффект зависит от значения цвета контура.

Примечание: Ни одно из других свойств контура (о которых вы узнаете больше в следующих главах) не будет иметь ЛЮБОГО эффекта, если не установлено свойство outline-style !

ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Как сделать — Контур кнопок

Узнать, как стилизовать кнопки контура с помощью CSS.

Контур кнопок

Создать контур кнопок

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

.btn <
border: 2px solid black;
background-color: white;
color: black;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
>

/* Зеленый */
.success <
border-color: #4CAF50;
color: green;
>

.success:hover <
background-color: #4CAF50;
color: white;
>

/* Синий */
.info <
border-color: #2196F3;
color: dodgerblue
>

.info:hover <
background: #2196F3;
color: white;
>

/* Оранжевый */
.warning <
border-color: #ff9800;
color: orange;
>

.warning:hover <
background: #ff9800;
color: white;
>

/* Красный */
.danger <
border-color: #f44336;
color: red
>

.danger:hover <
background: #f44336;
color: white;
>

/* Серый */
.default <
border-color: #e7e7e7;
color: black;
>

.default:hover <
background: #e7e7e7;
>

Добавить свойство border-radius для создания кнопок округлого контура:

Пример

Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.

CSS Ширина контура

Свойство outline-width определяет ширину контура и может иметь одно из следующих значений:

  • thin — тонкий (обычно 1px)
  • medium — средний (обычно 3px)
  • thick — толстый (обычно 5px)
  • Определенный размер (в px, pt, cm, em и т.д.)

В следующем примере показаны контуры разной ширины:

Контур толщиной в 4px.

Пример

p.ex1 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
>

p.ex2 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
>

p.ex3 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
>

p.ex4 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
>

ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *