Різниця між обрисами та кордоном

Хтось знає про різницю між властивостями "border" та "outline" у CSS? Якщо різниці немає, то чому існують дві властивості для однієї і тієї ж речі?

Від: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Властивість контуру CSS є заплутаною властивістю. Коли ви вперше дізнаєтесь про це, важко зрозуміти, як воно навіть віддалено відрізняється від прикордонного майна. 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>

ПІДМОГА

(Примітка. Хоча Firefox має -moz-outline-radiusвластивість, яка дозволяє закруглені кути на контуру ... ця властивість не визначена в будь-якому стандарті CSS і не підтримується іншими браузерами ( джерело ))

2) Стилізація лише однієї сторони

межа має властивості стилю кожного боку з 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>

ПІДМОГА

Примітка. Усі основні браузери підтримують, outline-offsetокрім Internet Explorer

Крім інших відповідей, контури зазвичай використовуються для налагодження. Opera має кілька приємних стилів CSS для користувачів, які використовують властивість контуру, щоб показати вам, де всі елементи знаходяться в документі.

Якщо ви намагаєтесь з’ясувати, чому елемент не відображається там, де ви очікували, або в очікуваному розмірі, додайте кілька контурів і подивіться, де елементи.

Як вже було сказано, обриси не займають місця. Додаючи рамку, загальна ширина / висота елемента в документі збільшується, але це не відбувається з контуром. Крім того, ви не можете встановити контури на певних сторонах, таких як межі; це все або нічого.

tldr;

W3C пояснює, що він має такі відмінності:

• Обриси не займають місця.
• Обриси можуть бути не прямокутними.

Джерело

Контур слід використовувати для доступності

Слід також зазначити, що основною метою структури є доступність. Поставивши його окреслити: жодного не слід уникати.

Якщо потрібно видалити його, можливо, краща ідея запропонувати альтернативну стилізацію:

Я бачив досить багато порад щодо видалення індикатора фокусування за допомогою контуру: жодного або контуру: 0. Будь ласка, не робіть цього, якщо ви не заміните контур чимось іншим, що полегшує зрозуміти, який елемент має фокус на клавіатурі. Видалення візуального індикатора фокусування клавіатури дасть людям, які покладаються на навігацію на клавіатурі, дуже важко орієнтуватися та користуватися вашим сайтом.

Джерело: "Не знімайте контур із управління посиланнями та формами", вул. Береа 365

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

• http://outlinenone.com/

Практичне використання структури стосується прозорості. Якщо у вас є батьківський елемент з фоном, але ви хочете, щоб межа дочірнього елемента була прозорою, щоб фоновий малюнок відображався, ви повинні використовувати "контур", а не "межу". Хоча рамка може бути прозорою, вона відображатиме походження дитини, а не батьківське.

Іншими словами, цей параметр створив такий ефект:

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

З сайту школи W3

В CSS прикордонні властивості дозволяють визначити стиль і колір межі елементу.

План є лінія , яка малюється навколо елемента (за межами кордонів) , щоб зробити елемент «виділитися».

Властивість скорочення контуру встановлює всі властивості контуру в одній декларації.

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

Якщо одне з наведених вище значень відсутнє, наприклад, "контур: твердий # 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 є межею IE, оскільки IE не реалізує модель коробки W3C.

У моделі коробки w3c рамка не включає ширину та висоту елемента. В IE це включно.

Я зробив невеликий шматок css / html-коду, щоб побачити різницю між обома.

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

borderнабагато більше пристосований для елементів, що ведуть блок .

Загадка для вас, сер!

Властивість контуру в CSS малює лінію навколо зовнішньої сторони елемента. Це схоже на кордон за винятком того, що:

• Це завжди обходиться з усіх боків, не можна конкретизувати конкретні
• сторони Це не частина моделі коробки, тому це не вплине на
  положення елемента або сусідніх елементів

Джерело: https://css-tricks.com/almanac/properties/o/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 це лише рядок поза елементом, але проблема полягає в тому, що якщо ви не зробите належним чином інтервал, він би перекривався іншим вмістом.

коротше:
окреслити плюси:
він не возиться з проміжками та
мінусами позицій :
велика ймовірність перекриття

Відмінності між кордоном та контуром:

Бордюр є частиною моделі коробки, тому він рахується з розміром елемента. Контур не є частиною моделі коробки, тому він не впливає на елементи поблизу.

Демонстрація:

#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:

Визначення та використання

Контур - це лінія, яка промальована навколо елементів (поза межами), щоб зробити елемент «виділеним».