CSS Randkleur

CSS Randkleur

border-color Deze eigenschap wordt gebruikt om de kleur van de vier randen in te stellen.

Kleuren kunnen op de volgende manier worden ingesteld:

  • name - specificeer de naam van de kleur, bijvoorbeeld "red"
  • HEX - specificeer de hexadecimale waarde, bijvoorbeeld "#ff0000"
  • RGB - specificeer de RGB-waarden, bijvoorbeeld "rgb(255,0,0)"
  • HSL - specificeer de HSL-waarden, bijvoorbeeld "hsl(0, 100%, 50%)"
  • transparent

Opmerking:Als het niet is ingesteld border-colordan neemt het de kleur van het element over.

Voorbeeld

Demonstreer verschillende randkleuren:

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

Resultaat:

Rode lijnrand

Groene lijnrand

Blauwe stiprand

Probeer het zelf

Specifieke randkleur

border-color Eigenschappen kunnen een tot vier waarden instellen (voor de bovenste rand, de rechter rand, de onderste rand en de linker rand).

Voorbeeld

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

Probeer het zelf

HEX-waarden

De kleur van de rand kan ook worden gespecificeerd met een hexadecimale waarde (HEX):

Voorbeeld

p.one {
  border-style: vast;
  border-color: #ff0000; /* Rood */
}

Probeer het zelf

RGB-waarden

Of gebruik RGB-waarden:

Voorbeeld

p.one {
  border-style: vast;
  border-color: rgb(255, 0, 0); /* Rood */
}

Probeer het zelf

HSL-waarden

Je kunt ook HSL-waarden gebruiken:

Voorbeeld

p.one {
  border-style: vast;
  border-color: hsl(0, 100%, 50%); /* Rood */
}

Probeer het zelf

Je kunt onze CSS Kleuren In dit Hoofdstuk leer je meer over HEX, RGB en HSL waarden.