CSS reunanvarjon väri

CSS reunanvarjon väri

outline-color Ominaisuus asettaa reunavärin.

Värin asettaminen voidaan tehdä seuraavilla tavoilla:

  • name - määritä väri nimi, esimerkiksi "red"
  • HEX - määritä heksadesimaaliarvo, esimerkiksi "#ff0000"
  • RGB - määritä RGB-arvo, esimerkiksi "rgb(255,0,0)"
  • HSL - määritä HSL-arvo, esimerkiksi "hsl(0, 100%, 50%)"
  • invert - suorittaa värin inversio (varmista, että reunaviiva on näkyvissä, riippumatta taustaväristä)

Alla on esimerkki eri väreistä ja eri reunaväristyksistä. Huomaa, että näillä elementeillä on myös musta ohut reunaviiva reunassa:

Punainen täysiväri reunaväri.

Sininen pisteväri reunaväri.

Harmaa kohokuva reunaväri.

Esimerkki

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

Kokeile itse

HEX-arvo

Voit myös käyttää heksadesimaaliarvoa (HEX) määrittääksesi reunavärin:

Esimerkki

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

Kokeile itse

RGB-arvo

tai käyttämällä RGB-arvoa:

Esimerkki

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

Kokeile itse

HSL-arvot

Voit myös käyttää HSL-arvoja:

Esimerkki

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

Kokeile itse

Voit löytää lisätietoja CSS värit Lisätietoja HEX, RGB ja HSL-arvoista tässä luvussa.

väriksen kääntämistä

Seuraavassa esimerkissä käytetään outline-color: invert，tehty väriksen kääntämisestä. Tämä varmistaa, että reunus on näkyvä riippumatta väriauliosta:

Käänteisen väriksen kiinteä reunus.

Esimerkki

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

Kokeile itse