CSS Outline Color

CSS Outline Color

outline-color De eigenschap wordt gebruikt om de randkleur in te stellen.

Kleuren kunnen op de volgende manier worden ingesteld:

  • name - specificeer een kleurnaam, bijvoorbeeld "red"
  • HEX - specificeer een hexadecimaal waarde, bijvoorbeeld "#ff0000"
  • RGB - specificeer een RGB-waarde, bijvoorbeeld "rgb(255,0,0)"
  • HSL - specificeer een HSL-waarde, bijvoorbeeld "hsl(0, 100%, 50%)"
  • invert - voert een kleuromkeer uit (zorg ervoor dat de rand zichtbaar is, ongeacht de achtergrondkleur)

Hieronder wordt een voorbeeld gegeven van verschillende kleuren en verschillende randstijlen. Let op, deze elementen hebben binnenin ook een zwarte fijnere randomlijst:

rode doorlopende lijnprofiel.

blauwe stipprofiel.

grijze uitsteekrandprofiel.

Example

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

Try It Yourself

HEX-waarde

U kunt ook een hexadecimaal waarde (HEX) gebruiken om de randkleur te specificeren:

Example

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

Try It Yourself

RGB-waarden

of door het gebruik van RGB-waarden:

Example

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

Try It Yourself

HSL Values

You can also use HSL values:

Example

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

Try It Yourself

You can find more information in our CSS Colors Learn more about HEX, RGB, and HSL values in this chapter.

reverse color

The following example uses outline-color: invertExecuted color reversal. This ensures that the outline is visible regardless of the color background:

Reverse the color of the solid outline.

Example

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

Try It Yourself