Свойство outline-color
CSS свойство outline-color используется для установки цвета контура.
Цвет может быть задан с помощью:
- Названия цвета - укажите цвет, например "red"
- HEX - укажите шестнадцатеричное значение, например "#ff0000"
- RGB - укажите значение RGB, например "rgb(255,0,0)"
- HSL - укажите значение HSL, например "hsl(0, 100%, 50%)"
- Инвертировать - выполняет инверсию цвета (которая гарантирует, что контур будет виден независимо от цвета фона)
В следующем примере показаны несколько разных контуров с разными цветами. Также обратите внимание, что эти элементы также имеют тонкую черную рамку внутри контура:
Сплошной красный контур.
Пунктирный синий контур.
Начальный серый контур.
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;
}
Попробуйте сами »
CSS HEX значение
Цвет контура также можно задать с помощью шестнадцатеричного значения (HEX):
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* красный */
}
Попробуйте сами »
CSS RGB значение
Или с помощью значений RGB:
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0);
/* красный */
}
Попробуйте сами »
CSS HSL значение
Вы также можете использовать значения HSL:
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* красный */
}
Попробуйте сами »
Вы можете узнать больше о значениях HEX, RGB и HSL в главе CSS Цвета.