CSS border-image
Thuộc tính CSS border-image cho phép bạn chỉ định một hình ảnh sẽ được sử dụng thay vì đường viền bình thường xung quanh một element.
Thuộc tính này gồm có ba phần:
- Hình ảnh được sử dụng làm đường viền
- Cắt hình ảnh ở đâu
- Xác định xem các phần giữa nên được lặp lại hay kéo dài
Chúng tôi sẽ sử dụng hình ảnh sau (được gọi là "border.png"):
Thuộc tính border-image lấy hình ảnh và cắt nó thành chín phần, giống như bảng tic-tac-toe. Sau đó, nó đặt các góc ở các góc, và các phần ở giữa được lặp lại hoặc kéo dài như bạn chỉ định.
Lưu ý: Để border-image hoạt động, element cũng cần có thuộc tính border!
Kết quả:
Chỉ định hình ảnh như một đường viền!
#borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 round; }
Mẹo: Thuộc tính border-image thực sự là thuộc tính viết tắt cho các thuộc tính border-image-source, border-image-slice, border-image-width, border-image-outset và border-image-repeat.
CSS border-image - Các giá trị Slice
Các giá trị slice khác nhau thay đổi hoàn toàn giao diện của đường viền:
Ví dụ 1:
border-image: url(border.png) 50 round;
Ví dụ 2:
border-image: url(border.png) 20% round;
Ví dụ 3:
border-image: url(border.png) 30% round;
#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; }