Thuộc tính CSS outline-color
Thí dụ
Đặt màu cho đường viền:
div {outline-color: coral;}
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-color
tính chỉ định màu của đường viền.
Lưu ý: Luôn khai báo thuộc tính kiểu phác thảo trước thuộc
outline-color
tính. Một phần tử phải có một đường viền trước khi bạn thay đổi màu sắc của nó.
Giá trị mặc định: | đảo ngược nếu được hỗ trợ, nếu không thì màu hiện tại |
---|---|
Thừa hưởng: | không |
Hoạt hình: | có, hãy xem các thuộc tính riêng lẻ . Đọc về hoạt hình |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | đối tượng .style.outlineColor = "# FF0000" |
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-color | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Lưu ý: Giá trị invert
này không được hỗ trợ trong bất kỳ trình duyệt nào, ngoại trừ Internet Explorer 8.
Cú pháp CSS
outline-color: invert|color|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
invert | Performs a color inversion. This ensures that the outline is visible, regardless of color background. Note: Browsers are not required to support this value. | |
color | Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values. | |
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ụ
Đặt màu cho đường viền bằng giá trị HEX:
div {outline-color: #92a8d1;}
Thí dụ
Đặt màu cho đường viền với giá trị RGB:
div {outline-color: rgb(201, 76, 76);}
Thí dụ
Đặt màu cho đường viền với giá trị RGBA:
div {outline-color: rgba(201, 76, 76, 0.3);}
Thí dụ
Đặt màu cho đường viền với giá trị HSL:
div {outline-color: hsl(89, 43%, 51%);}
Thí dụ
Đặt màu cho đường viền với giá trị HSLA:
div {outline-color: hsla(89, 43%, 51%, 0.3);}
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 outlineColor