Thuộc tính nguồn hình ảnh viền CSS
Ví dụ
Chỉ định hình ảnh làm đường viền xung quanh một phần tử:
#borderimg
{
border-image-source: url(border.png);
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính border-image-source
chỉ định đường dẫn đến hình ảnh được sử dụng làm đường viền (thay vì đường viền thông thường xung quanh một phần tử).
Mẹo: Nếu giá trị là "none" hoặc nếu hình ảnh không thể hiển thị thì kiểu đường viền sẽ được sử dụng.
Mẹo: Ngoài ra, hãy xem thuộc tính border-image (thuộc tính tốc ký để đặt tất cả các thuộc tính border-image-*).
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.borderImageSource="url(border.png)"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 | |||||
---|---|---|---|---|---|
border-image-source | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Cú pháp CSS
border-image-source: none| image |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
none | No image will be used | |
image | The path to the image to be used as a border | Demo ❯ |
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: Hình ảnh viền CSS
Tham khảo CSS: thuộc tính hình ảnh viền
Tham khảo CSS: thuộc tính border-image-outset
Tham khảo CSS: thuộc tính lặp lại hình ảnh viền
Tham khảo CSS: thuộc tính border-image-slice
Tham khảo CSS: thuộc tính border-image-width
Tham chiếu DOM HTML: thuộc tính borderImageSource