Цвет контура 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) для указания цвета обводки:

Пример

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* Красный */
}

Попробуйте сами

Значения RGB

или с использованием значений RGB:

Пример

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* Красный */
}

Попробуйте сами

Значения HSL

Вы также можете использовать значения HSL:

Пример

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* Красный */
}

Попробуйте сами

Вы можете найти больше информации о Цвета CSS В этом разделе вы узнаете больше о HEX, RGB и HSL значениях.

цветовое превращение

В следующем примере используется outline-color: invertВыполнено цветовое превращение. Это гарантирует, что контур будет видимым независимо от фона цвета:

Превращение цвета в обратный цвет для линии обводки.

Пример

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Попробуйте сами