Thuộc tính border-image-width

Thuộc tính border-image-width điều khiển chiều rộng của phần hiển thị đường viền, tỷ lệ nó. Nếu giá trị này lớn hơn chiều rộng border-width, hình ảnh đường viền sẽ tràn vào dưới nội dung.

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

Cú pháp

bộ chọn {
	border-image-width: đơn vị CSS | phần trăm | số | auto;
}

Giá trị

Giá trị	Mô tả
Đơn vị CSS	Giá trị trong các đơn vị CSS được chỉ định.
Phần trăm	Giá trị phần trăm tương đối so với kích thước khối được đặt đường viền.
Số	Giá trị số, được nhân với `border-width`.
`auto`	Từ khóa. Nếu được đặt, giá trị bằng với giá trị tương ứng của `border-image-slice`. Nếu không có kích thước phù hợp, sẽ sử dụng giá trị `border-width`, khi đó hình ảnh lấp đầy toàn bộ góc đường viền, tràn vào dưới nội dung. Xem các ví dụ để hiểu rõ hơn.

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

Ví dụ . Số

Thiết lập giá trị border-image-width thành 2 khi di chuột qua phần tử. Khi đó đường viền sẽ có kích thước 26px*2 - gấp 2 lần so với chiều rộng của nó được đặt trong border-width. Đường viền khi đó sẽ lấn vào dưới văn bản (giống như nền):

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

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

Ví dụ . Thay đổi border-image-repeat thành round

Trong ví dụ trước, khi di chuột qua, trong đường viền sẽ không có số lượng hình thoi nguyên vẹn. Hãy sửa điều này bằng cách đặt border-image-repeat thành giá trị round:

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

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

Ví dụ . Phần trăm

Thiết lập giá trị border-image-width thành 50% khi di chuột qua phần tử. Khi đó đường viền sẽ có kích thước 50% so với kích thước khối (tức là hai đường viền, bên phải và bên trái, sẽ phủ lên toàn bộ khối):

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

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

Ví dụ . Phần trăm

Thiết lập giá trị border-image-width thành 30% khi di chuột qua phần tử. Khi đó đường viền sẽ có kích thước 30% so với kích thước khối:

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

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

Ví dụ . Pixel

Thiết lập giá trị border-image-width thành 50px khi di chuột qua phần tử:

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

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

Ví dụ . Giá trị auto

Thiết lập giá trị border-image-width thành auto khi di chuột qua phần tử.

Trước khi di chuột, border-image-width có giá trị 1 (mặc định). Trong ví dụ, border-width được đặc biệt đặt là 52px, còn border-image-slice - là giá trị 26 (hiệu ứng với auto sẽ chỉ quan sát được nếu border-width không bằng border-image-slice). Do border-image-width có giá trị 1, hình ảnh đường viền sẽ chiếm toàn bộ chiều rộng border-width, tức là sẽ kéo dài ra 52px. Khi di chuột qua, giá trị border-image-width sẽ được đặt thành auto và chiều rộng hình ảnh sẽ bằng giá trị border-image-slice, tức là 26px:

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

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

Xem thêm

thuộc tính border-image,
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-repeat,
lặp lại 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