CSS konturfarve

CSS konturfarve

outline-color Egenskaben bruges til at indstille kantfarven.

Farve kan indstilles på følgende måde:

  • navn - specificer farvenavn, f.eks. "red"
  • HEX - specificer sekssifret værdi, f.eks. "#ff0000"
  • RGB - specificer RGB-værdi, f.eks. "rgb(255,0,0)"
  • HSL - specificer HSL-værdi, f.eks. "hsl(0, 100%, 50%)"
  • invert - udfører farveinvertering (sørg for, at konturen er synlig, uanset hvilken baggrundsfarve)

Følgende eksempel viser forskellige farver og forskellige kantstilarter. Bemærk, at disse elementer har en sort tynd kantindramning inden for konturen:

rød konstant kant.

blå punktlinje kant.

grå kantlinje med fremtrædende kant.

Eksempel

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;
}

Prøv det selv

HEX-værdi

Du kan også bruge sekssifret værdi (HEX) til at specificere kantfarve:

Eksempel

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* 红色 */
}

Prøv det selv

RGB-værdi

eller ved at bruge RGB-værdi:

Eksempel

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* 红色 */
}

Prøv det selv

HSL værdier

您还可以使用 HSL 值：

Eksempel

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* 红色 */
}

Prøv det selv

您可以在我们的 CSS farver 章节中学习有关 HEX、RGB 和 HSL 值的更多知识。

反转颜色

下例使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的：

Reverser farven af den rektangulære kontur.

Eksempel

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

Prøv det selv