Кто-нибудь знает о какой-либо разнице между свойствами "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
Дополнительные ресурсы
Ответ 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:
Определение и использование
Контур - это линия, нарисованная вокруг элементов (за пределами границ) чтобы элемент "выделялся".