Внешняя рамка[10/33]

Полезное, но редко используемое свойство — внешняя рамка илиoutline.

Синтаксисoutlineсхож сborder. Но внешней рамке нельзя задать параметры отдельных сторон. Пример:

/* сплошная чёрная рамка толщиной 10px */
outline: 10px solid black;

Это сокращённый синтаксис свойстваoutline. Есть и отдельные свойства:

outline-width: 10px;  /* толщина */
outline-style: solid; /* стиль */
outline-color: black; /* цвет */

Внешняя рамка всегда отображается снаружи элемента, не влияет на его размер и не занимает места, то есть отображается над другими элементами.

C помощью свойстваoutline-offsetможно изменять расположение рамки. Положительное значение отодвигает рамку от внешнего края элемента, а отрицательное «втягивает» внутрь.

Уoutline-styleте же значения, что и уborder-style. Кстати, есть интересные типы рамокridgeиgroove, они создают объёмные рамки.

Попробуем всё это на практике.