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