Разница между контуром и границей

Question

Кто-нибудь знает какие-либо различия между свойствами 'border' и 'outline' в CSS? Если нет никакой разницы, то почему существуют два свойства для одной и той же вещи?

Answer 1

От: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Свойство контура CSS является запутанным свойством. Когда вы впервые узнаете об этом, трудно понять, как это даже отдаленно отличается от свойства border. W3C объясняет это наличием следующих отличий:

1.Наборы не занимают места.

2. Контуры могут быть не прямоугольными.

Answer 2

В дополнение к некоторым другим ответам ... вот еще несколько различий, которые я могу себе представить:

1) Закругленные углы

border поддерживает закругленные углы со свойством border-radius. outline нет.

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}

<div class="border"></div>

<div class="outline"></div>

FIDDLE

(Примечание: хотя firefox имеет свойство -moz-outline-radius, которое позволяет скруглять углы на контуре ... это свойство не определено ни в одном стандарте CSS и не поддерживается другими браузерами ( источник ))

2) Стилизация только одной стороны

border имеет свойства для стиля каждой стороны с border-top:, border-left: и т. Д.

контур не может этого сделать. Там нет контура сверху и т. Д. Это все или ничего. (см. этот пост )

3) смещение

контур поддерживает смещение со свойством контур-смещение . границы нет.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

FIDDLE

Примечание. Все основные браузеры поддерживают outline-offset, кроме Internet Explorer

Answer 3

В дополнение к другим ответам, схемы обычно используются для отладки. В Opera есть несколько приятных пользовательских стилей CSS, которые используют свойство outline, чтобы показать вам, где находятся все элементы в документе.

Если вы пытаетесь выяснить, почему элемент не появляется там, где вы ожидали, или в том размере, который вы ожидали, добавьте несколько контуров и посмотрите, где находятся элементы.

Как уже упоминалось, контуры не занимают места. Когда вы добавляете границу, общая ширина / высота элемента в документе увеличивается, но этого не происходит с контуром. Также вы не можете устанавливать контуры на определенных сторонах, таких как границы; это все или ничего.

Answer 4

tldr;

W3C объясняет это наличием следующих отличий:

• Контуры не занимают места.
• Контуры могут быть не прямоугольными.

Источник

Схема должна использоваться для доступности

Следует также отметить, что основной целью набросков является доступность. Установка его в общих чертах: ни один не следует избегать.

Если вы должны удалить его, может быть, лучше предложить альтернативный стиль:

Я видел довольно много советов о том, как убрать индикатор фокусировки, используя контур: нет или контур: 0. Пожалуйста, не делайте этого, если только вы не замените контур чем-то другим, что позволяет легко увидеть, какой элемент имеет фокус клавиатуры. Снятие визуального индикатора фокуса клавиатуры даст людям, которые полагаются на навигацию с помощью клавиатуры, очень сложную навигацию и использование вашего сайта.

Источник: «Не удалять контуры из элементов управления ссылками и формами», ул. Береа, 365

---

Больше ресурсов

• http://outlinenone.com/

Answer 5

Практическое использование набросков касается прозрачности. Если у вас есть родительский элемент с фоном, но вы хотите, чтобы граница дочернего элемента была прозрачной, чтобы фон родительского элемента просвечивал, вы должны использовать «контур» вместо «граница». Хотя граница может быть прозрачной, на ней будет отображаться фон ребенка, а не родитель.

Другими словами, этот параметр создал следующий эффект:

outline: 7px solid rgba(255, 255, 255, 0.2);

Answer 6

Немного старый вопрос, но стоит упомянуть об ошибке рендеринга в Firefox (все еще присутствующей по состоянию на январь '13), когда контур будет отображаться снаружи всех дочерних элементов, даже если они переполняют своего родителя (через отрицательные поля тени от ящиков и т. д.)

Вы можете исправить это с помощью:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

Очень жаль, что это все еще не исправлено. Я очень предпочитаю контуры во многих случаях, так как они не увеличивают размеры элемента, избавляя вас от необходимости учитывать ширину границы при настройке размеров элемента.

В конце концов, что проще?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

Или:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

Answer 7

с сайта школы W3

Свойства CSS border позволяют указать стиль и цвет границы элемента.

контур - это линия, которая рисуется вокруг элементов (вне границ), чтобы элемент выделялся.

Сокращенное свойство набросков устанавливает все свойства набросков в одном объявлении.

Можно установить следующие свойства (по порядку): цвет контура, стиль контура, ширина контура.

Если одно из указанных выше значений отсутствует, например, "outline: solid # ff0000;", будет добавлено значение по умолчанию для отсутствующего свойства, если оно есть.

Проверьте здесь для получения дополнительной информации: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Answer 8

Стоит также отметить, что контур W3C является IE border , поскольку IE не реализует блочную модель W3C.

В блочной модели w3c граница не зависит от ширины и высоты элемента. В IE это включено.

Answer 9

воспринимайте контур как границу, которую проектор рисует вне чего-либо, поскольку граница - это реальный объект вокруг этой вещи.
проекция может легко перекрываться, но граница не пропускает вас.
в некоторых случаях, когда я использую grid+%width, border изменяет масштабирование порта представления, например, div с width:100% в родительском с width:100px полностью заполняет родительский, но когда я добавляю border:solid 5px в div, это делает div меньше, чтобы освободить место для границы (хотя это редко и обходно!)
но с контуром у него нет этой проблемы, так как контур более виртуален: D это просто линия вне элемента но проблема в том, что если вы не сделаете интервал должным образом, он будет перекрываться с другим содержимым.

чтобы сделать его коротким:
очертить плюсы:
это не портит расстояние и позиции
минусы:
высокая вероятность перекрытия

Answer 10

Свойство outline в CSS рисует линию вокруг внешней части элемента. Это похоже на бордюр за исключением того, что:

• Это всегда идет вокруг всех сторон, вы не можете указать конкретный
• сторон Он не является частью модели коробки, поэтому он не повлияет на
  положение элемента или соседних элементов

Источник: https://css -tricks.com / almanac / properties / o / outline /