CSS Контур
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!