Thuộc tính border-image-repeat

Thuộc tính border-image-repeat thiết lập cách lặp lại phần bên trong của đường viền dưới dạng hình ảnh. Để biết thông tin chi tiết hơn hãy xem thuộc tính border-image.

Cú pháp

bộ chọn {
	border-image-repeat: stretch | repeat | round;
}

Giá trị

Số lượng tham số	Mô tả
`stretch`	Kéo dãn hình vẽ đường viền đến kích thước của phần tử. Giá trị này được sử dụng theo mặc định.
`repeat`	Lặp lại hình vẽ đường viền.
`round`	Lặp lại hình vẽ và thay đổi tỷ lệ của nó sao cho trên cạnh của phần tử có được một số nguyên hình ảnh.

Giá trị mặc định: stretch.

Số lượng tham số

Có thể nhận 1 hoặc 2 tham số. Nếu đặt hai tham số, thì tham số đầu tiên sẽ dành cho đường viền trên và dưới, còn tham số thứ hai - dành cho đường viền trái và phải.

Ví dụ . Giá trị stretch

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ví dụ . Giá trị repeat

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ví dụ . Giá trị round

Hiện tại trong trạng thái bình thường được thiết lập giá trị repeat, còn khi di chuột qua - round. Hãy chú ý rằng trước khi di chuột qua trong đường viền chứa không phải số nguyên hình thoi, còn sau khi di chuột qua - là số nguyên. Đó là cách round hoạt động:

<div id="elem"></div>

#elem:hover {
	border-image-repeat: round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ví dụ . Hai từ

Giá trị repeat cho chiều rộng và stretch cho chiều cao:

<div id="elem"></div>

#elem {
	border-image-repeat: repeat stretch;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Xem thêm

thuộc tính border-image,
là cách viết tắt cho đường viền-hình ảnh
thuộc tính border-image-source,
thiết lập đường dẫn đến hình ảnh cho đường viền
thuộc tính border-image-slice,
cắt hình ảnh cho đường viền
thuộc tính border-image-width,
thiết lập kích thước hình ảnh cho đường viền
thuộc tính border-image-outset,
thiết lập độ dịch chuyển hình ảnh cho đường viền