Thuộc tính hình ảnh đường 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: url(border.png) 30 round;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính border-image
cho phép bạn chỉ định một hình ảnh sẽ được sử dụng làm đường viền xung quanh một phần tử.
Thuộc tính border-image là thuộc tính viết tắt của:
- nguồn hình ảnh biên giới
- lát-hình ảnh viền
- chiều rộng hình ảnh viền
- hình ảnh biên giới
- lặp lại hình ảnh viền
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 100% 1 0 co dãn |
---|---|
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ã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.
Các số theo sau là -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ợ trình duyệt riêng lẻ 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 | Demo |
---|---|---|
border-image-source | The path to the image to be used as a border | Demo ❯ |
border-image-slice | How to slice the border image | Demo ❯ |
border-image-width | The width of the border image | Demo ❯ |
border-image-outset | The amount by which the border image area extends beyond the border box | Demo ❯ |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Các giá trị lát cắt khác nhau sẽ thay đổi hoàn toàn hình thức 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;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Hình ảnh viền CSS
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 nguồn hình ảnh viền
Tham khảo CSS: thuộc tính border-image-width
Tham chiếu DOM HTML: thuộc tính borderImage