CSS Outline

CSS Outline

Một outline là một đường kẻ được vẽ xung quanh phần tử, ở bên ngoài của đường viền, để làm cho phần tử nổi bật.

CSS có các thuộc tính outline sau:

1. outline-style
2. outline-color
3. outline-width
4. outline-offset
5. outline

Ghi chú: Outline khác với border! Không giống như border, outline là đường vẽ nằm ở bên ngoài đường viền của phần tử, và có thể gối lên nội dung khác. Ngoài ra, outline không phải là một phần của kích thước của phần tử; nên tổng chiều rộng và chiều cao của phần tử không bị ảnh hưởng bởi chiều rộng của outline.

Các kiểu Outline trong CSS

Thuộc tính outline-style được sử dụng để chỉ định kiểu outline, và nó có thể có một trong số các giá trị sau:

1. dotted - Định nghĩa một outline kiểu chấm chấm.
2. dashed - Định nghĩa một outline kiểu nét đứt.
3. solid - Định nghĩa một outline kiểu nét liền đơn.
4. double - Định nghĩa một outline kiểu nét liền kép.
5. groove - Định nghĩa một outline kiểu 3D grooved.
6. ridge - Định nghĩa một outline kiểu 3D ridged.
7. inset - Định nghĩa một outline kiểu 3D inset.
8. outset - Định nghĩa một outline kiểu 3D outset.
9. none - Định nghĩa không có outline.
10. hidden - Định nghĩa một outline ẩn.

Ví dụ sau sẽ hiển thị các giá trị khác nhau của thuộc tính outline-style:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Kết quả:

Ghi chú: Không có bất kỳ thuộc tính outline nào khác có hiệu ứng nếu như thuộc tính outline-style không được thiết lập!