Контур элемента: Outline

css

Содержание:



Свойство OUTLINE

Свойство Значения Пр* Нc*
outline [ outline-color; outline-style; outline-width ], inherit + -
outline-color ЦВЕТ, invert, inherit + -
outline-style none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit + -
outline-width thin, medium, thick, ШИРИНА, inherit + -

Outline — сокращённая форма записи свойств, которая задаёт общий контур элемента. Контуры не влияют на размещение элементов, они могут быть неправильной формы.

Пример:

<style type="text/css">
.kontur {outline:3px dotted #999; background-color:#D5F2FD; width:250px; padding:10px 0 10px 20px;}
</style>

<div class="kontur">
<div>Свойство <em>Outline</em> — сокращённая форма записи свойств … </div>
</div>

В примере мы задали ширину, стиль и цвет контура элемента «kontur», используя сокращенную форму записи — свойство Outline:

свойство outline

Outline-color

Свойство задает цвет контура элемента. И, хотя значением по умолчанию выступает invert, его лучше задать самому.

Значения:

Цвет
invert — автоматически задаёт цвет контура для достижения контраста с окружающим фоном элемента. Однако спецификация CSS 2.1 оставляет «свободу выбора» браузерам, которые обычно используют значение свойства Color, заданное для самого элемента.
inherit — наследование от родительского элемента.

Outline-style

Свойство определяет стиль контура элемента.

Значения:

none — не отображает контура.
inherit — наследование от родительского элемента.

Остальные значения свойства Outline-style схожи со свойством Border-style, но в отличие от него не влияют на размещение элемента. Иллюстрация наглядно демонстрирует стили контура элемента:

стиль контура элемента

Outline-width

Свойство задает ширину контура элемента, которое работает только в случае, если задан стиль контура — т.е. свойство Outline-style имеет значение отличное от none.

Значения:

Ширину контура можно указывать в разных единицах, принятых в CSS, удобнее всего в px.

thin — узкая линия, как правило, шириной в 1 px.
medium — средней толщины.
thick — широкая.
inherit — наследование от родительского элемента.

Содержание: