Thuộc tính kiểu phác thảo CSS
Thí dụ
Đặt kiểu cho đường viền:
div {outline-style: dotted;}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Đị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 các đường viền, để làm cho phần tử đó "nổi bật".
Thuộc outline-style
tính chỉ định kiểu của một đường viền.
Giá trị mặc định: | không ai |
---|---|
Thừa hưởng: | không |
Hoạt hình: | không. Đọc về hoạt hình |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | đối tượng .style.outlineStyle = "dashed" |
Mẹo và lưu ý
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 của các 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.
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-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Cú pháp CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
none | Specifies no outline. This is default | |
hidden | Specifies a hidden outline | |
dotted | Specifies a dotted outline | |
dashed | Specifies a dashed outline | |
solid | Specifies a solid outline | |
double | Specifies a double outliner | |
groove | Specifies a 3D grooved outline. The effect depends on the outline-color value | |
ridge | Specifies a 3D ridged outline. The effect depends on the outline-color value | |
inset | Specifies a 3D inset outline. The effect depends on the outline-color value | |
outset | Specifies a 3D outset outline. The effect depends on the outline-color value | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Đường nét đứt nét:
div {outline-style: dashed;}
Thí dụ
Một phác thảo chắc chắn:
div {outline-style: solid;}
Thí dụ
Một phác thảo kép:
div {outline-style: double;}
Thí dụ
Một phác thảo rãnh:
div {
outline-style:
groove;
outline-color: coral;
outline-width: 7px;
}
Thí dụ
Một phác thảo sườn núi:
div {
outline-style:
ridge;
outline-color: coral;
outline-width: 7px;
}
Thí dụ
Một phác thảo bên trong:
div {
outline-style:
inset;
outline-color: coral;
outline-width: 7px;
}
Thí dụ
Một phác thảo đầu tiên:
div {
outline-style:
outset;
outline-color: coral;
outline-width: 7px;
}
Thí dụ
Đặt kiểu của một đường viền bằng cách sử dụng các giá trị khác nhau:
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
Các trang liên quan
Hướng dẫn CSS: CSS Outline
Tham chiếu CSS: thuộc tính phác thảo
Tham chiếu DOM HTML: thuộc tính outlineStyle