Thuộc tính hình ảnh đường viền CSS
Thí dụ
Chỉ định một hình ảnh làm đường viền xung quanh một phần tử:
#borderimg {
border-image: url(border.png) 30 round;
}
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
Thuộc border-image
tính cho phép bạn chỉ định một hình ảnh được sử dụng làm đường viền xung quanh một phần tử.
Thuộc tính hình ảnh đường viền là một thuộc tính viết tắt cho:
- border-image-source
- viền-hình-lát
- border-image-width
- viền-hình-ảnh-ra-ngoài
- biên giới-hình ảnh-lặp lại
Các giá trị bị bỏ qua được đặt thành giá trị mặc định của chúng.
Giá trị mặc định: | không căng 100% 1 0 |
---|---|
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.borderImage = "url (border.png) 30 vòng" |
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.
Các số theo sau -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
Lưu ý: Xem hỗ trợ từng trình duyệt cho từng giá trị bên dưới.
Cú pháp CSS
border-image: source slice width outset repeat|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
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ụ
Các giá trị lát cắt khác nhau thay đổi hoàn toàn giao diện của đường viền:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Các trang liên quan
Hướng dẫn CSS: Hình ảnh đường viền CSS
Tham chiếu CSS: thuộc tính border-image-outset
Tham chiếu CSS: thuộc tính border-image-repeat
Tham chiếu CSS: thuộc tính border-image-slice
Tham chiếu CSS: thuộc tính border-image-source
Tham chiếu CSS: thuộc tính border-image-width
Tham chiếu DOM HTML: thuộc tính borderImage