Hình ảnh đường viền CSS
Hình ảnh đường viền CSS
Với thuộc tính CSS border-image
, bạn có thể đặt 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 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 bình thường xung quanh một phần tử.
Tài sản 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 border-image
tính này 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 như bạn chỉ định.
Lưu ý: Để border-image
hoạt động, phần tử cũng cần có thuộc
border
tính!
Ở đây, các 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 biên giới!
Đây là mã:
Thí dụ
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
Ở đây, các 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 biên giới!
Đây là mã:
Thí dụ
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
Mẹo: Thuộc border-image
tính thực sự là một thuộc tính viết tắt cho các
thuộc tính border-image-source
, và
.border-image-slice
border-image-width
border-image-outset
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 thay đổi hoàn toàn giao diện của đường viền:
Ví dụ 1:
border-image: url (border.png) 50 vòng;
Ví dụ 2:
border-image: url (border.png) 20% vòng;
Ví dụ 3:
border-image: url (border.png) 30% vòng;
Đây là mã:
Thí 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;
}
Thuộc tính hình ảnh đường 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 |