Thuộc tính outline-style CSS
- trang trước outline-offset
- Trang tiếp theo outline-width
Định nghĩa và cách sử dụng
Thuộc tính outline-style được sử dụng để thiết lập phong cách của đường viền toàn bộ của phần tử. Phong cách không thể là none, nếu không đường viền sẽ không xuất hiện.
Outline (đường viền) là một đường được vẽ xung quanh phần tử, nằm ở ngoài viền mép, có thể làm nổi bật phần tử. Thuộc tính outline thiết lập đường viền xung quanh phần tử.
Ghi chú:Luôndeclare thuộc tính outline-style trước thuộc tính outline-color. Phần tử chỉ có thể thay đổi màu đường viền sau khi đã có đường viền.
Ghi chú:Đường viền contour không chiếm không gian và không nhất thiết phải là hình vuông.
Xem thêm:
Hướng dẫn CSS:Vành CSS
Hướng dẫn tham khảo CSS:Thuộc tính outline
Hướng dẫn tham khảo HTML DOM:Thuộc tính outlineStyle
Ngữ pháp CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Giá trị thuộc tính
Giá trị | Mô tả |
---|---|
none | Mặc định. Định nghĩa không có đường viền. |
hidden | Định nghĩa đường viền ẩn. |
dotted | Định nghĩa đường viền chấm. |
dashed | Định nghĩa đường viền chấm. |
solid | Định nghĩa đường viền nguyên chất. |
double | Định nghĩa đường viền đôi. Chiều rộng của đôi đường bằng giá trị outline-width. |
groove | Định nghĩa đường viền rãnh 3D. Hiệu ứng này phụ thuộc vào giá trị outline-color. |
ridge | Định nghĩa đường viền nổi rãnh 3D. Hiệu ứng này phụ thuộc vào giá trị outline-color. |
inset | Định nghĩa đường viền rãnh 3D. Hiệu ứng này phụ thuộc vào giá trị outline-color. |
outset | Định nghĩa đường viền nổi 3D. Hiệu ứng này phụ thuộc vào giá trị outline-color. |
inherit | Định nghĩa rằng nên kế thừa thiết lập phong cách đường viền từ phần tử cha. |
Chi tiết kỹ thuật
Giá trị mặc định: | none |
---|---|
Kế thừa: | no |
Phiên bản: | CSS2 |
Ngữ pháp JavaScript: | object.style.outlineStyle="dotted" |
Thử trực tiếp
- Thiết lập phong cách đường viền
- Ví dụ này minh họa cách thiết lập phong cách đường viền.
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Ghi chú:Nếu đã định nghĩa !DOCTYPE, thì IE8 hỗ trợ thuộc tính outline.
- trang trước outline-offset
- Trang tiếp theo outline-width