Свойство outline
Outline — это линия, проведенная за пределами границы элемента.
Попробуйте сами »
CSS свойство outline
Свойство outline — это линия, которая рисуется вокруг элементов «за пределами границ», для того чтобы элемент «выделялся».
CSS обладает следующими свойствами контура:
outline-styleoutline-coloroutline-widthoutline-offsetoutline
Примечание: Контур отличается от border! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывать другое содержимое. Кроме того, контур не является частью размеров элемента; общая ширина и высота элемента не зависят от ширины контура.
CSS свойство outline-style
Свойство outline-style задает стиль контура и может иметь одно из следующих значений:
dotted— устанавливает контур штрихомdashed— устанавливает контур пунктиромsolid— устанавливает сплошной контурdouble— устанавливает двойной контурgroove— устанавливает 3D контур желобом.ridge— устанавливает 3D контур хребтом.inset— устанавливает 3D контур вставкой.outset— устанавливает 3D контур начальный.none— устанавливает без контураhidden— устанавливает скрытый контур
В следующем примере показаны различные значения outline-style:
Демонстрация различных стилей контуров:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Результат:
Контур пунктиром.
Контур штрихом.
Контур сплошной.
Контур двойной.
Контур желобом. Эффект зависит от значения outline-color.
Контур хребтом. Эффект зависит от значения outline-color.
Контур вставкой. Эффект зависит от значения outline-color.
Контур начальный. Эффект зависит от значения outline-color.
Примечание: Ни одно из других свойств outline (о которых вы узнаете больше в следующих главах) не будет иметь никакого эффекта, если только свойство outline-style!