Warna Garis Latar Belakang CSS

Warna Garis Latar Belakang CSS

outline-color properti digunakan untuk menyetel warna garisan luar.

Dapat diatur warna dengan 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 pengalihan warna (memastikan garisan luar dapat dilihat, tanpa peduli warna latar belakang)

Contoh di bawah ini menunjukkan berbagai warna dan gaya garisan luar yang berbeda. Perhatikan, elemen ini masih memiliki garisan bercorak hitam di dalam garisan luar:

garisan luar merah garis tebal.

garisan luar biru titik.

garisan luar gelap abu-abu.

实例

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

亲自试一试

nilai HEX

Anda juga boleh menggunakan nilai heksadesimal (HEX) untuk tentukan warna garisan luar:

实例

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

亲自试一试

nilai RGB

atau melalui penggunaan nilai RGB:

实例

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

亲自试一试

值 HSL

您还可以使用 HSL 值：

实例

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

亲自试一试

您可以在我们的 Warna CSS 章节中学习有关 HEX、RGB 和 HSL 值的更多知识。

颜色反转

下例使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的：

轮廓实线颜色反转。

实例

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

亲自试一试