Hình ảnh viền CSS
Hình ảnh viền CSS
Với thuộc tính CSS border-image
, bạn có thể đặ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 CSS
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 thông thường xung quanh một phần tử.
Tài sản có ba phần:
- Hình ảnh dùng làm đường viền
- Cắt ả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ư một 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 theo chỉ định của bạn.
Lưu ý: Để border-image
hoạt động, phần tử cũng cần đặt thuộc tính border
!
Ở đây, phần giữa của hình ảnh được lặp lại để tạo đường viền:
Một hình ảnh như một đường viền!
Đây là mã:
Ví dụ
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
Hãy tự mình thử »Ở đây, phần giữa của hình ảnh được kéo dài để tạo đường viền:
Một hình ảnh như một đường viền!
Đây là mã:
Ví dụ
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
Hãy tự mình thử » Mẹo: Thuộc tính border-image
thực chất là thuộc tính viết tắt của các thuộc border-image-source
, border-image-slice
, border border-image-width
, border-image-outset
và border-image-repeat
.
Hình ảnh đường viền CSS - Các giá trị lát cắt khác nhau
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:
Ví dụ 1:
hình ảnh viền: url(border.png) 50 vòng;
Ví dụ 2:
hình ảnh viền: url(border.png) tròn 20%;
Ví dụ 3:
hình ảnh viền: url(border.png) tròn 30%;
Đây là mã:
Ví dụ
#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ử » Thuộc tính hình ảnh viền CSS
Property | Description |
---|---|
border-image | A shorthand property for setting all the border-image-* properties |
border-image-source | Specifies the path to the image to be used as a border |
border-image-slice | Specifies how to slice the border image |
border-image-width | Specifies the widths of the border image |
border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |