Màu cung CSS

Màu cung CSS

outline-color Thuộc tính này được sử dụng để thiết lập màu viền.

Bạn có thể thiết lập màu theo cách sau:

  • name - Chỉ định tên màu, ví dụ "red"
  • HEX - Chỉ định giá trị hex, ví dụ "#ff0000"
  • RGB - Chỉ định giá trị RGB, ví dụ "rgb(255,0,0)"
  • HSL - Chỉ định giá trị HSL, ví dụ "hsl(0, 100%, 50%)"
  • invert - Thực hiện phản chiếu màu (đảm bảo rằng viền luôn hiển thị, bất kể màu nền là gì)

Dưới đây là một số ví dụ về các loại viền khác nhau với các màu khác nhau. Lưu ý rằng các yếu tố này vẫn có viền mỏng màu đen trong viền:

Viền nổi màu đỏ.

Viền nổi màu xanh dương.

Viền nổi màu xám.

Mẫu

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: đỏ;
}
p.ex2 {
  border: 2px solid black;
  outline-style: chấm;
  outline-color: xanh dương;
}
p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: xám;
}

Thử ngay

Giá trị HEX

Bạn cũng có thể sử dụng giá trị hex (HEX) để chỉ định màu viền:

Mẫu

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

Thử ngay

Giá trị RGB

hoặc thông qua việc sử dụng giá trị RGB:

Mẫu

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

Thử ngay

Giá trị HSL

Bạn cũng có thể sử dụng giá trị HSL:

Mẫu

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

Thử ngay

Bạn có thể trong Màu CSS Trong phần này học thêm về HEX, RGB và giá trị HSL.

Màu ngược lại

Dưới đây là ví dụ sử dụng outline-color: invertThực hiện颜色 ngược lại. Điều này đảm bảo rằng不论颜色 nền như thế nào, vòng viền vẫn luôn nhìn thấy được:

Vòng viền màu ngược lại.

Mẫu

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

Thử ngay