Внешний контур

Внешний контур - это линия, которая отрисовывается за рамкой HTML элемента.

Внешний контур - это линия, которая рисуется вокруг элемента ЗА ПРЕДЕЛАМИ рамки, чтобы "выделить" HTML элемент.

В CSS есть следующие свойства для определения внешнего контура элемента:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

Внимание! Внешний контур отличается от рамки! Внешний контур рисуется за пределами рамки элемента и может перекрывать другое содержимое. Также, внешний контур не входит в систему размеров элемента, т. е. ширина внешнего контура не влияет на общую ширину и высоту элемента.

Стиль внешнего контура

Свойство 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!

Ширина внешнего контура

Свойство outline-width определяет ширину внешнего контура и может принимать следующие значения:

• thin (обычно 1px)
• medium (обычно 3px)
• thick (обычно 5px)
• число в единицах измерения (в px, pt, cm, em и т.д.)

В следующем примере определяется различная ширина внешнего контура:

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

Результат:

Цвет внешнего контура

Свойство outline-color используется для определения цвета внешнего контура.

Цвет можно задать как

• имя цвета - например, "red",
• HEX значение - например, "#ff0000",
• RGB значение - например, "rgb(255,0,0)",
• HSL значение - например, "hsl(0,100%,50%)",
• invert - инверсия цвета (позволяет сделать внешний контур видимым независимо от цвета фона).

В следующем примере определяется различный цвет внешнего контура. Обратите внимание, что у элемента также определяется тонкая черная рамка внутри внешнего контура:

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

Результат:

Подробнее о цветах рассказывается в главе нашего учебника Как использовать цвета.

Короткая форма записи

Свойство outline является короткой формой записи, объединяющей воедино следующие свойства:

• outline-width
• outline-style (обязательно)
• outline-color

Свойство outline может использоваться с одним, двумя или тремя значениями из данного списка. Порядок значений не важен.

В следующем примере определяются внешние контуры с использованием краткой формы записи outline:

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

Результат:

Смещение внешнего контура

Свойство outline-offset добавляет промежуток между внешним контуром и краем/рамкой элемента. Промежуток между элементом и внешним краем прозрачный.

В следующем примере определяется внешний контур с отступом 15px от рамки элемента:

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Результат:

Следующий пример показывает, что промежуток между внешним контуром и рамкой элемента прозрачный:

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Результат:

Все CSS свойства определения внешнего контура