ສີກະດູກ CSS

ສີກະດູກ CSS

outline-color ປະສົມປະກອບຕ້ອງໃຊ້ເພື່ອກຳນົດສີກະດູກ.

ທ່ານສາມາດກຳນົດສີໄດ້ໂດຍ:

  • name - ກຳນົດຊື່ສີ, ຕົວຢ່າງ "red"
  • HEX - ກຳນົດຄູ່ມີສີພິມສາມະຫາສານ, ຕົວຢ່າງ "#ff0000"
  • RGB - ກຳນົດ RGB ທີ່, ຕົວຢ່າງ "rgb(255,0,0)"
  • HSL - ກຳນົດ HSL ທີ່, ຕົວຢ່າງ "hsl(0, 100%, 50%)"
  • invert - ການປ່ຽນສີກັບຄືນ (ຮັບປະກັນວ່າກະດູກຈະເຫັນໄດ້ທັງໝົດໃນການປ່ຽນສີການປະກາດ)

ບົດສະແດງຄືດັ່ງກ່າວບາງສີທີ່ຫຼາຍຊັບຊ້ອນ. ບໍ່ມີຄວາມລຳບາກວ່າ, ບັນດາເອກະສານນີ້ມີບາຊອບຂາຍຂວາງສີດຳ:

ກະດູກສີກະສູດລົງ.

ກະດູກສີຫຼຸດລົງ.

ກະດູກກະພິບສີຂຽວ.

实例

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

ທ້າວທາງຄົນຕົກເວົ້າຄວາມ

HEX ທີ່

ທ່ານສາມາດໃຊ້ຄູ່ມີສີພິມສາມະຫາສານ (HEX) ເພື່ອກຳນົດສີກະດູກ:

实例

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

ທ້າວທາງຄົນຕົກເວົ້າຄວາມ

RGB ທີ່

ການໃຊ້ 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%); /* 红色 */
}

ທ້າວທາງຄົນຕົກເວົ້າຄວາມ

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

反转颜色

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

反转颜色的实线轮廓。

实例

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

ທ້າວທາງຄົນຕົກເວົ້າຄວາມ