Thuộc tính border-image CSS

Định nghĩa và cách sử dụng

Thuộc tính border-image là một thuộc tính viết tắt, được sử dụng để thiết lập các thuộc tính sau:

Nếu bỏ qua giá trị, sẽ thiết lập giá trị mặc định.

Lưu ý:Vui lòng sử dụng thuộc tính border-image-* để tạo nút có thể co dãn đẹp mắt!

Xem thêm:

Giáo trình CSS3:BORDER của CSS3

Ví dụ

Đặt hình ảnh làm viền bao quanh phần tử div:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Thử ngay

Có nhiều ví dụ khác ở cuối trang.

Ngữ pháp CSS

border-image: source slice width outset repeat|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả Kiểm tra
border-image-source Đường dẫn đến hình ảnh được sử dụng trong viền.
border-image-slice Độ偏移 hình ảnh viền vào trong.
border-image-width Chiều rộng hình ảnh viền.
border-image-outset Lượng vượt ra ngoài của khu vực hình ảnh viền.
border-image-repeat Hình ảnh viền có nên lặp lại (repeated), lấp đầy (rounded) hay kéo dãn (stretched) không. Kiểm tra

Chi tiết kỹ thuật

Giá trị mặc định: none 100% 1 0 stretch
Kế thừa: no
Phiên bản: CSS3
Ngữ pháp JavaScript: object.style.borderImage="url(border.png) 30 30 round"

Các ví dụ khác

Nút Border-image
Ví dụ minh họa cách tạo nút bằng thuộc tính border-image.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-