Цвет обрамления CSS

Цвет обрамления CSS

border-color Эта свойство используется для установки цвета четырех рамок.

Цвет можно установить следующим образом:

  • name - Указать имя цвета, например "red"
  • HEX - Указать шестнадцатеричное значение, например "#ff0000"
  • RGB - Указать значение RGB, например "rgb(255,0,0)"
  • HSL - Указать значение HSL, например "hsl(0, 100%, 50%)"
  • transparent

Комментарий:Если не установлено border-colorто он будет наследовать цвет элемента.

Пример

Пример различных цветов рамки:

p.one {
  border-style: solid;
  border-color: red;
{}
p.two {
  border-style: solid;
  border-color: green;
{}
p.three {
  border-style: dotted;
  border-color: blue;
{}

Результат:

красная сплошная рамка

зеленая сплошная рамка

голубая точечная рамка

Перепробуйте

Цвет конкретной рамки

border-color Свойства могут устанавливать от одного до четырех значений (для верхнего, правого, нижнего и левого рамки).

Пример

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
{}

Перепробуйте

Значения HEX

Цвет границы также можно определить с помощью шестнадцатеричных значений (HEX):

Пример

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

Перепробуйте

Значения RGB

Или использовать значения RGB:

Пример

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

Перепробуйте

Значения HSL

También se pueden usar значения HSL:

Пример

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

Перепробуйте

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