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

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

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>

скрипка

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

2) Укладка только с одной стороны

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

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

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>

скрипка

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

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

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

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

tldr;

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

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

источник

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

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

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

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

источник: "не удаляйте контур из элементов управления ссылками и формами", 365 Berea Street

---

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

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

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

С Сайта Школы W3

The граница CSS свойства позволяют задать стиль и цвет границы элемента.

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

свойство outline shorthand задает все свойства outline в одном объявлении.

свойства, которые могут быть установлены, являются (в порядке): контур-цвет, контур-стиль, контур-ширина.

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

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

немного старый вопрос, но стоит упомянуть об ошибке рендеринга 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;
}

также стоит отметить, что W3C's контур это IE границы, так как IE не реализует модель W3C box.

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

Я сделал небольшой фрагмент кода css / html, чтобы увидеть разницу между ними.

outline лучше включить потенциальные переполненные дочерние элементы, особенно в inline контейнер.

border гораздо более приспособлен для блок-ведешь элементов.

скрипка для вас, сэр!

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

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

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

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

общий метод "замены изображения" должен использовать, например:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

со следующим в CSS:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

проблема в том, что когда фокус достигает тега контур головы от 1000em влево. Контур может позволить вам отключить контур фокусировки на таких элементах.

Я считаю, что панель инструментов разработчика IE также использует что-то вроде контура "под капотом" при выделении элементов для проверки в режиме "выбрать". Это хорошо показывает тот факт, что" контур " не занимает места.

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

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

скопировано из W3Schools:

определение и использование

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