CSS Контур
Попробуйте сами »
CSS Контур
Контур - это линия, которая проводится вокруг элементов ВНЕ границ, чтобы сделать элемент "выделяющимся".
CSS имеет следующие свойства контура:
-
outline-style -
outline-color -
outline-width -
outline-offset -
outline
Примечание: Контур отличается от границ! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывать другое содержимое. Кроме того, контур НЕ является частью размеров элемента; общая ширина и высота элемента не зависит от ширины контура.
CSS Стиль контура
Свойство 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-style!
