Контура CSS

Этот элемент имеет чёрную рамку и синий контур шириной 10px.

Контура 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;}

Результат:

Точечная линия контура.

Пунктирная линия контура.

Прямая линия контура.

Двойная линия контура.

3D вогнутый паз. Этот эффект зависит от значения outline-color.

3D выпуклый паз. Этот эффект зависит от значения outline-color.

3D вогнутый контур. Этот эффект зависит от значения outline-color.

3D выпуклый контур. Этот эффект зависит от значения outline-color.

Попробуйте это на практике

Внимание:Либо если установлено outline-style Свойство,否则 другие свойства контура (которые будут подробно рассмотрены в следующей главе) не будут иметь никакого эффекта!