Thuộc tính phác thảo CSS
Ví dụ
Đặt đường viền xung quanh phần tử <h2> và phần tử <div>:
h2 {
outline: 5px dotted green;
}
div.a {
outline: 2px dashed blue;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Đườ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".
Thuộc tính outline
là thuộc tính viết tắt của:
- chiều rộng phác thảo
- kiểu phác thảo (bắt buộc)
- màu phác thảo
Nếu màu đường viền bị bỏ qua, màu được áp dụng sẽ là màu của văn bản.
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.
Giá trị mặc định: | màu đảo vừa |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | vâng, xem các thuộc tính riêng lẻ . Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | object .style.outline="#0000FF chấm 5px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
outline | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Cú pháp CSS
outline: outline-width outline-style outline-color |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
outline-width | Specifies the width of outline | Try it » |
outline-style | Specifies the style of the outline | Try it » |
outline-color | Specifies the color of the outline | Try it » |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Trang liên quan
Hướng dẫn CSS: CSS Outline
Tham chiếu DOM HTML: thuộc tính phác thảo