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