Понедельник, 27 Мая 2013 10:41

CSS свойство outline

Written by 
Оцени эту запись
(1 Голос)

CSS свойство outline позволяет задать одновременно цвет, стиль и ширину внешней границы. Для этого можно также использовать отдельные свойства outline-color, outline-style и outline-width.

 

Пример:

 

<div class="outline1">Text</div>

 

.outline1 {

outline: 2px dotted violet;

}

 

 

Text

 

 

В отличии от свойства border, свойство outline не занимает пространство:

 

 

Строка с border

 

Строка с outline

 

 

В строке с border между "с" и "border" стало больше пространства из-за границы. В случае же с outline, граница залезла на слово "c" и дополнительное пространство не появилось.

 

 

Как уже упоминалось ранее, стили границы outline можно задавать и отдельно.

 

outline-color -- задает цвет границы, значение можно задавать в разных видах -- white, #fff

 

outline-style -- задает стиль границы -- solid, dotted, dashed и т. д.

 

outline-width -- задает ширину границы -- в пикселах, em

 

 

Приведу несколько примеров:

 

 

outline: 2px solid violet      outline: 2px dotted violet      outline: 2px dashed violet      outline: 4px groove violet      outline: 4px double violet

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов