border и outline

[DivMan]

Посмотрите правильно ли я понял. Вот когда пишешь свойство border, то рамка появляется вокруг содержимого, а когда пишешь outline, то рамка появляется внутри содержимого. Я правильно понял? 

Зелёный цвет это граница дива.

 

       

[zenw]

Относительно outline - нет, не обязательно. Положением рамки outline можно управлять через outline-offset, и смещать ее хоть внутрь контента, хоть на любое расстояние снаружи.

[afdw]

Border сдвигает элемент, outline - нет. Демо: http://jsfiddle.net/HCqzS/2

Edited April 26, 2014 by afdw

[CroaToa]

Border сдвигает элемент

 Сдвигает как то не правильно, правильнее сказать border увеличивает размеры блока.

Например есть квадрат 100*100, мы для него писали border: 5px dotted green; итоговый размер нашего квадрата будет 110*110. То есть с каждой стороны по 5px добавляется. 

 

А вот с outline такого нет, ему хоть пропиши 50px - все равно наш квадрат останется размеров 100*100.

[Николя223]

Быть может это только в Chromium-е такой глюк, но на outline не действует border-radius

Edited April 27, 2014 by Николя223

[CroaToa]

Быть может это только в Chromium-е такой глюк, но на outline не действует border-radius

А какое здесь отношение имеет бордер радиус? Объясни пожалуйста. 

[Switch74]

Быть может это только в Chromium-е такой глюк, но на outline не действует border-radius

А какое здесь отношение имеет бордер радиус? Объясни пожалуйста. 

 

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

[SelenIT]

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

 

Вообще, по сабжу, главное различие — border является частью боксовой («блочной») модели элемента, outline не является. Соответственно, нет гарантий, что outline будет неотрывно следовать за элементом в любых его приключениях, и критичных элементов оформления лучше на нее не завязывать. Всё-таки ее основная задача — динамическое выделение элемента при его активации для какого-то действия (например, печально знаменитая пунктирная рамка ссылок и кнопок при фокусе ), для этой цели, сугубо имхо, лучше ее и оставить.

[amelice]

Всё-таки ее основная задача — динамическое выделение элемента при его активации для какого-то действия (например, печально знаменитая пунктирная рамка ссылок и кнопок при фокусе ), для этой цели, сугубо имхо, лучше ее и оставить.

Спасибо, не знала задачу outline

[Николя223]

для этой цели, сугубо имхо, лучше ее и оставить.

учитывая возможные глюки - может быть лучше менять на box-shadow?  

Edited April 28, 2014 by Николя223

[SelenIT]

Пожалуй, что так. У тени и возможностей больше.