Tóm tắt CSS
Đường viền là một đường được vẽ bên ngoài đường viền của phần tử.
Hãy tự mình thử »
Tóm tắt CSS
Đường viền là một đường được vẽ xung quanh các phần tử, BÊN NGOÀI đường viền, để làm cho phần tử "nổi bật".
CSS có các thuộc tính phác thảo sau:
-
outline-style
-
outline-color
-
outline-width
-
outline-offset
-
outline
Lưu ý: Đường viền khác với đường viền ! Không giống như đường viền, đường viền được vẽ bên ngoài đường viền của phần tử và có thể chồng lên nội dung khác. Ngoài ra, đường viền KHÔNG phải là một phần kích thước của phần tử; 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 đường viền.
Kiểu phác thảo CSS
Thuộc tính outline-style
chỉ định kiểu của phác thảo và có thể có một trong các giá trị sau:
-
dotted
- Xác định đường viền chấm -
dashed
- Xác định đường viền nét đứt -
solid
- Xác định một phác thảo vững chắc -
double
- Xác định đường viền kép -
groove
- Xác định đường viền có rãnh 3D -
ridge
- Xác định đường viền có đường gờ 3D -
inset
- Xác định đường viền nội dung 3D -
outset
- Xác định đường viền đầu 3D -
none
- Xác định không có phác thảo -
hidden
- Xác định một phác thảo ẩn
Ví dụ sau đây cho thấy các giá trị outline-style
khác nhau:
Ví dụ
Trình diễn các phong cách phác thảo khác nhau:
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ả:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Lưu ý: Không có thuộc tính phác thảo nào khác (mà bạn sẽ tìm hiểu thêm trong các chương tiếp theo) sẽ có BẤT KỲ hiệu ứng nào trừ khi thuộc tính outline-style
được đặt!