Thuộc tính border-image-slice

Thuộc tính border-image-slice chỉ định cho trình duyệt biết phần nào của hình ảnh sẽ dùng cho các góc, phần nào dùng cho các cạnh (và phần nào sẽ là phần trung tâm). Các góc dùng 4 phần, các cạnh dùng 4 phần và một phần (trung tâm) dùng làm nền cho phần tử (tùy chọn, từ khóa fill).

Để biết thêm thông tin chi tiết, hãy xem thuộc tính border-image.

Cú pháp

<+css+> bộ chọn { border-image-slice: từ 1 đến 4 số | từ 1 đến 4 phần trăm; } <-css->

Cùng với số và phần trăm, có thể có từ khóa fill, cách nhau bằng dấu cách.

Giá trị

Giá trị	Mô tả
phần trăm	Phần trăm được tính toán dựa trên kích thước của hình ảnh. Theo chiều ngang tính theo chiều rộng, theo chiều dọc — tính theo chiều cao.
số	Số - là pixel (đối với hình ảnh raster) hoặc tọa độ (đối với hình ảnh vector). Không cần chỉ định đơn vị đo.
`fill`	Hành vi mặc định giả định rằng phần trung tâm của hình ảnh sẽ bị loại bỏ. Để sử dụng nó, cần phải sử dụng từ khóa `fill` bổ sung cùng với số hoặc phần trăm.

Số lượng tham số

Độ lệch có thể nhận 1, 2, 3 hoặc 4 tham số. Hãy chú ý rằng đơn vị đo cho độ lệch không được viết (ví dụ: chỉ 20, chứ không phải 20px). Cũng có thể đặt độ dày bằng %.

Số tham số	Mô tả
`1`	Độ dày cho tất cả các cạnh cùng một lúc.
`2`	1 2; - `1px` cho cạnh trên và dưới, `2px` cho cạnh trái và phải.
`3`	`1 2 3`; - `1px` cho cạnh trên, `2px` cho cạnh trái và phải, `3px` cho cạnh dưới.
`4`	`1 2 3 4`; - `1px` cho cạnh trên, `2px` cho cạnh phải, `3px` cho cạnh dưới, `4px` cho cạnh trái.

Giá trị mặc định: 100%(?).

Ví dụ

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

#elem {
	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;
}

Ví dụ

<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;
}

Xem thêm

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