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

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

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

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

1. Контуры не занимают места.

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-top:, и border-left:т.д.

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

3) смещение

outline поддерживает смещение с помощью свойства outline-offset . граница не

.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.

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

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

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

tldr;

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

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

Источник

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

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

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

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

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

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

• http://outlinenone.com/

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

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

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

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

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

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

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

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

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

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

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

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

.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 является границей IE, поскольку IE не реализует блочную модель W3C.

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

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

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

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

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

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

Граница является частью блочной модели, поэтому она учитывает размер элемента. Контур не является частью блочной модели, поэтому он не влияет на соседние элементы.

Демо-версия:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}

<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

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

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

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