Thuộc tính border-image-outset

Thuộc tính border-image-outset cho phép đẩy đường viền ra ngoài giới hạn của phần tử. Giá trị được chỉ định là một số không có đơn vị đo hoặc bất kỳ đơn vị kích thước nào, trừ phần trăm. Nếu chỉ định một số không có đơn vị, thì nó là hệ số nhân, nhân với giá trị của thuộc tính border-width. Giá trị âm không được hỗ trợ.

Để biết thông tin chi tiết về hình ảnh cho đường viền, hãy xem thuộc tính border-image.

Cú pháp

bộ chọn {
	border-image-outset: số dương;
}

Ví dụ . Số

Đặt giá trị border-image-outset là 3 khi di chuột vào phần tử. Khi đó đường viền sẽ dịch chuyển ra 26px*3 - gấp 3 lần so với độ rộng của nó, được đặt trong border-width:

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

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

Ví dụ . Pixel

Đặt giá trị border-image-outset là 30px khi di chuột vào phần tử. Khi đó đường viền sẽ dịch chuyển ra 30px:

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

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

Xem thêm

thuộc tính border-image,
là thuộc tính 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,
chỉ định cách cắt hình ảnh cho đường viền
thuộc tính border-image-repeat,
chỉ định cách lặp 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