Màu đường viền CSS
Màu đường viền CSS
Thuộc outline-color
tính được sử dụng để đặt màu của đường viền.
Màu có thể được đặt bằng:
- tên - chỉ định tên màu, chẳng hạn như "đỏ"
- HEX - chỉ định một giá trị hex, như "# ff0000"
- RGB - chỉ định một giá trị RGB, như "rgb (255,0,0)"
- HSL - chỉ định một giá trị HSL, như "hsl (0, 100%, 50%)"
- invert - thực hiện đảo ngược màu sắc (đảm bảo rằng đường viền có thể nhìn thấy được, bất kể màu nền là gì)
Ví dụ sau đây cho thấy một số đường viền khác nhau với các màu sắc khác nhau. Cũng lưu ý rằng các yếu tố này cũng có một đường viền mỏng màu đen bên trong đường viền:
Một đường viền chắc chắn màu đỏ.
Đường viền màu xanh lam chấm chấm.
Một đường viền màu xám ban đầu.
Thí dụ
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;
}
Giá trị HEX
Màu đường viền cũng có thể được chỉ định bằng giá trị thập lục phân (HEX):
Thí dụ
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}
Giá trị RGB
Hoặc bằng cách sử dụng các giá trị RGB:
Thí dụ
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*
red */
}
Giá trị HSL
Bạn cũng có thể sử dụng các giá trị HSL:
Thí dụ
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}
Bạn có thể tìm hiểu thêm về các giá trị HEX, RGB và HSL trong chương Màu CSS của chúng tôi .