CSS kontur färg

CSS kontur färg

outline-color Egenskapen används för att ställa in konturfärgen.

Du kan ställa in färgen på följande sätt:

  • name - specificera färgnamn, t.ex. "red"
  • HEX - specificera hex-värden, t.ex. "#ff0000"
  • RGB - specificera RGB-värden, t.ex. "rgb(255,0,0)"
  • HSL - specificera HSL-värden, t.ex. "hsl(0, 100%, 50%)"
  • invert - utför färginvertering (se till att konturen är synlig, oavsett vilken färg bakgrund som används)

Nedan visas några olika färger och olika konturstilar.Observera att dessa element också har en svart tunn kantram inuti konturen:

en röd kontur med fasta linjer.

en blå punktformad kontur.

en grå konvex kontur.

Exempel

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

Prova själv

HEX-värden

Du kan också använda hex-värden (HEX) för att specificera konturfärgen:

Exempel

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

Prova själv

RGB-värden

eller genom att använda RGB-värden:

Exempel

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

Prova själv

HSL-värden

Du kan också använda HSL-värden:

Exempel

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

Prova själv

Du kan hitta mer information om CSS färger i kapitlet för att lära dig mer om HEX, RGB och HSL-värden.

färgreversering

Följande exempel använder outline-color: invertutförde färgreversering. Detta säkerställer att konturen är synlig oavsett bakgrundsfärg:

Reverserad färgs linje

Exempel

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

Prova själv