Warna Garis Silang CSS

Warna Garis Silang CSS

outline-color Properti digunakan untuk menentukan warna kontur.

Dapat diatur warna melalui cara berikut:

  • name - tentukan nama warna, seperti "red"
  • HEX - tentukan nilai heksadesimal, seperti "#ff0000"
  • RGB - tentukan nilai RGB, seperti "rgb(255,0,0)"
  • HSL - tentukan nilai HSL, seperti "hsl(0, 100%, 50%)"
  • invert - melaksanakan pengembalian warna (memastikan kontur terlihat, tanpa peduli warna latar belakang)

Contoh di bawah ini menunjukkan berbagai warna dan gaya kontur yang berbeda. Perhatikan, elemen ini masih memiliki garis bercantik hitam di dalam kontur:

Kontur garis merah.

Kontur titik biru.

Kontur bulat abu-abu.

Contoh

p.ex1 {
  border: 2px solid hitam;
  outline-style: solid;
  outline-color: merah;
}
p.ex2 {
  border: 2px solid hitam;
  outline-style: dotted;
  outline-color: biru;
}
p.ex3 {
  border: 2px solid hitam;
  outline-style: outset;
  outline-color: abu-abu;
}

Coba Sendiri

nilai HEX

Anda juga dapat menggunakan nilai heksadesimal (HEX) untuk menentukan warna kontur:

Contoh

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

Coba Sendiri

nilai RGB

atau dengan menggunakan nilai RGB:

Contoh

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

Coba Sendiri

Nilai HSL

Anda juga dapat menggunakan nilai HSL:

Contoh

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

Coba Sendiri

Anda dapat menemukan Warna CSS Panduan tentang nilai HEX, RGB, dan HSL di dalam bab ini.

Pengebalikan warna

Contoh berikut menggunakan outline-color: invertMelakukan pengebalikan warna. Ini memastikan bahwa silangan dapat terlihat tanpa mengira latar belakang warna:

Garis latar belakang berwarna terbalik.

Contoh

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

Coba Sendiri