CSS outline
CSS свойство контур
Свойство CSS outline устанавливает стиль, цвет и ширину контура.
Контур - линия, которая нарисованна вокруг элементов (вне границ), чтобы "выделить" элемент.
Однако, свойство outline отличается от свойства border - контур не является частью измерения элементов;
общая ширина элемента и высота не зависит от ширины контура.
Элемент имеет тонкую черную ганицу и контур, ширина значения 10 пикселей, зеленого цвета.
Стили контура
Свойство outline-style устанавливает стиль контура.
Свойство outline-style может установить одно из следующих значений:
dotted- устанавливает контур штрихомdashed- устанавливает контур пунктиромsolid- устанавливает сплошной контурdouble- устанавливает двойной контурgroove- устанавливает 3D контур желобом. Эффект зависит от значениеoutline-colorridge- устанавливает 3D контур коньком. Эффект зависит от значениеoutline-colorinset- устанавливает 3D контур вставкой. Эффект зависит от значениеoutline-coloroutset- устанавливает 3D контур начальный. Эффект зависит от значениеoutline-colornone- устанавливает без контураhidden- устанавливает скрытый контур
В следующем примере сначала устанавливается тонкая черная граница вокруг каждого элемента <p>,
затем он показывает разные значения стиля outline-style:
Пример
p {
border: 1px solid black;
outline-color: red;
}
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.
Примечание: Ни один из свойств CSS контура, описаных ниже, не будет иметь никакого эффекта,
если установленно свойство outline-style
Цвет контура
Свойство outline-color используется для установки цвета контура.
Цвет может быть установлен:
- Имя - укажите название цвета,
"red" - RGB - укажите значение RGB,
"rgb(255,0,0)" - Hex - укажите шестнадцатеричное значение,
"#ff0000" - invert - выполняет инверсию цвета (которая гарантирует, что контур виден, независимо от цвета фона)
Пример
p{
border: 1px solid black;
outline-style: double;
outline-color: red;
}
Результат:
Контур Цветной.
Ширина контура
Свойство outline-width определяет ширину контура.
Ширина может быть установлена как определенный размер в ( px, pt, cm, em, т.п.) или с помощью одного из трех предопределенных значений:
thinтонкий, medium средний или thick толстые.
Пример
p {border: 1px solid black;}
p.one{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Результат:
Контур толстый.
Контур более тонкий.
Контур - сокращеное свойство
Чтобы сократить код, можно также задать индивидуальные свойства структуры в одном свойстве.
Свойство outline сокращенное свойство для следующих индивидуальных свойств контура:
outline-widthoutline-style(требуется)outline-color
Проверьте себя с помощью упражнений!
Все CSS свойства контура
| Свойство | Описание |
|---|---|
| outline | Устанавливает все свойства контура в одной декларации |
| outline-color | Устанавливает цвет контура |
| outline-offset | Устанавливает пространство между контуром и краем или границей элемента |
| outline-style | Устанавливает стиль контуров |
| outline-width | Устанавливает ширину контура |
