Thuộc tính outline

Định nghĩa và sử dụng

Thuộc tính outline định dạng các đường viền bao ngoài.

Cấu trúc

tag {
    outline: giá trị;
}

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
outline Mã màu
Kiểu
Độ rộng
outline: #ff0000 solid 2px; Đây là cách viết ngắn gọn, tổng hợpcủa các thuộc tính bên dưới.
outline-color Mã màu outline-color: #ff0000; Định dạng màu sắc cho đường bao ngoài.
outline-style dotted outline-style: dotted;

Thành phần sử dụng outline

dashed outline-style: dashed;

Thành phần sử dụng outline

solid outline-style: solid;

Thành phần sử dụng outline

double outline-style: double;

Thành phần sử dụng outline

groove outline-style: groove;

Thành phần sử dụng outline

ridge outline-style: ridge;

Thành phần sử dụng outline

inset outline-style: inset;

Thành phần sử dụng outline

outset outline-style: outset;

Thành phần sử dụng outline

inherit outline-style: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
outline-width Độ rộng outline-width: 2px; Xác định độ rộng cho đường bao ngoài.

HTML viết:

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

HỌC WEB CHUẨN

CSS viết:

p {
    outline: 5px double red;
}

Hiển thị trình duyệt khi có CSS:

HỌC WEB CHUẨN

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

Thuộc tính outline được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype