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

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

Ответ 1

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

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

1. Строки не занимают места.

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

Ответ 2

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

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

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

Ответ 3

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

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>

Ответ 4

TL;DR;

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

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

Источник

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

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

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

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

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

Дополнительные ресурсы

http://outlinenone.com/

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

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

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

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

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

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

Подробнее здесь: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Ответ 8

Также стоит отметить, что контур W3C является границей IE, поскольку IE не реализует модель коробки W3C.

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

Ответ 9

В качестве практического примера использования "контура" слабая пунктирная рамка, которая следует за системой, фокусируется на веб-странице (например, если вы просматриваете ссылки), можно управлять с помощью свойства контура (по крайней мере, я знаю это может в 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;
}

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

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

Ответ 10

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

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

border гораздо более адаптирован для элементов block.

Сценарий для вас, сэр!

Ответ 11

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

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

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

Ответ 12

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

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

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