Kolor ramki CSS

Kolor ramki CSS

border-color Polecane kursy:

Atrybut służy do ustawienia koloru czterech krawędzi.

  • Kolor można ustawić w następujący sposób:
  • name - określ nazwę koloru, np. "red"
  • HEX - określ wartość szesnastkową, np. "#ff0000"
  • RGB - określ wartość RGB, np. "rgb(255,0,0)"
  • HSL - określ wartość HSL, np. "hsl(0, 100%, 50%)"

transparentKomentarz: border-colorjeśli nie ustawiono,

Przykład

Pokaz różnych kolorów krawędzi:

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

Wynik:

Krawędź ciągła czerwona

Krawędź ciągła zielona

Krawędź punktowa niebieska

Spróbuj sam

Kolor specyficznej krawędzi

border-color Atrybut może mieć od jednej do czterech wartości (używane do górnej, prawej, dolnej i lewej krawędzi).

Przykład

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

Spróbuj sam

Wartości HEX

Kolor krawędzi można również określić za pomocą wartości szesnastkowej (HEX):

Przykład

p.one {
  border-style: solid;
  border-color: #ff0000; /* czerwony */
}

Spróbuj sam

Wartości RGB

Lub użyj wartości RGB:

Przykład

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

Spróbuj sam

Wartości HSL

Można również użyć wartości HSL:

Przykład

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

Spróbuj sam

Możesz spróbować w naszych Kolory CSS Dowiedziałeś się więcej o wartościach HEX, RGB i HSL w rozdziale.