CSS Outline
Структура CSS
Контур представляет собой линию, которая рисуется вокруг элементов, за пределами границ, чтобы сделать элемент "выделиться".
CSS имеет следующие свойства структуры:
-
outline-style -
outline-color -
outline-width -
outline-offset -
outline
Примечание: Контур отличается от границ! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывать другое содержимое. Кроме того, контур не является частью размеров элемента; Общая ширина и высота элемента не зависит от ширины контура.
Стиль контура
Свойство outline-style задает стиль структуры и может иметь одно из следующих значений:
dotted- Определяет пунктирную структуруdashed- Определяет пунктирную структуруsolid- Определяет сплошной контурdouble- Определяет двойной контурgroove- Определяет трехмерную контурную канавкуridge- Определение трехмерного ребристого контураinset- Определяет контур 3D-вставкиoutset- Определение трехмерного контура началаnone- Не определяет структуруhidden- Определяет скрытый контур
В следующем примере показаны различные значения outline-style :
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Пример
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-color используется для задания цвета контура.
Цвет может быть установлен:
- name - Укажите имя цвета, например "red"
- RGB - Укажите значение RGB, например "rgb(255,0,0)"
- Hex - Укажите шестнадцатеричное значение, например "#ff0000"
- invert - выполняет инверсию цвета (что обеспечивает видимость структуры, независимо от цвета фона)
В следующем примере показаны некоторые различные контуры с различными цветами. Также обратите внимание, что эти элементы также имеют тонкие черные границы внутри контура:
Сплошной красный контур.
Двойной зеленый контур.
Вначале желтый контур.
Пример
p.ex1
{
border: 1px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2
{
border: 1px solid black;
outline-style: double;
outline-color: green;
}
p.ex3
{
border: 1px solid black;
outline-style: outset;
outline-color: yellow;
}
В следующем примере используется outline-color: invert , который выполняет инверсию цвета. Это гарантирует, что контур будет виден, независимо от цвета фона:
Сплошной инвертированный контур.
Пример
p.ex1
{
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}
Ширина контура
Свойство outline-width задает ширину структуры и может иметь одно из следующих значений:
- thin (typically 1px)
- medium (typically 3px)
- thick (typically 5px)
- A specific size (in px, pt, cm, em, etc)
В следующем примере показаны некоторые очертания с различной шириной:
A thin outline.
A medium outline.
A thick outline.
A 4px thick outline.
Пример
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 является сокращенным свойством для задания следующих отдельных свойств структуры:
outline-widthoutline-style(Обязательно)outline-color
Свойство outline задается как одно, два или три значения из приведенного выше списка. Порядок значений не имеет значения.
В следующем примере показаны некоторые контуры, заданные с помощью сокращенного свойства outline:
A dashed outline.
A dotted red outline.
A 5px solid yellow outline.
A thick ridge pink outline.
Пример
p.ex1
{outline: dashed;}
p.ex2
{outline: dotted red;}
p.ex3
{outline: 5px solid yellow;}
p.ex4
{outline: thick ridge pink;}
Смещение контура
Свойство outline-offset добавляет пространство между контуром и краем/границей элемента. Пространство между элементом и его контуром прозрачно.
В следующем примере указывается структура 15пкс за пределами границы:
Этот абзац имеет контур 15пкс за пределами края границы.
Пример
p {
margin: 30px;
border: 1px solid black;
outline:
1px solid red;
outline-offset: 15px;
}
В следующем примере показано, что пространство между элементом и его контуром прозрачно:
Этот абзац имеет контур 15пкс за пределами края границы.
Пример
p {
margin: 30px;
background:
yellow;
border: 1px solid black;
outline:
1px solid red;
outline-offset: 15px;
}
Все свойства структуры CSS
| Свойство | Описание |
|---|---|
| outline | Сокращенное свойство для задания ширины контура, стиля структуры и цвета структуры в одном объявлении |
| outline-color | Задает цвет контура |
| outline-offset | Задает расстояние между контуром и краем или границей элемента |
| outline-style | Задает стиль контура |
| outline-width | Задает ширину контура |