Thuộc tính lặp lại hình ảnh viền CSS
Ví dụ
Chỉ định cách lặp lại hình ảnh viền:
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính border-image-repeat
chỉ định xem hình ảnh viền nên được lặp lại, làm tròn, giãn cách hay kéo dài.
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: | kéo dài |
---|---|
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.borderImageRepeat="round"Hãy thử 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 | |||||
---|---|---|---|---|---|
border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Cú pháp CSS
border-image-repeat: stretch|repeat|round|space|initial|inherit;
Lưu ý: Thuộc tính này chỉ định cách chia tỷ lệ và xếp lát các hình ảnh ở các cạnh và phần giữa của hình ảnh viền. Vì vậy, bạn có thể chỉ định hai giá trị ở đây. Nếu giá trị thứ hai bị bỏ qua, nó được coi là giống với giá trị thứ nhất.
Giá trị tài sản
Value | Description | Play it |
---|---|---|
stretch | Default value. The image is stretched to fill the area | Demo ❯ |
repeat | The image is tiled (repeated) to fill the area | Demo ❯ |
round | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits | Demo ❯ |
space | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles | 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 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 borderImageRepeat