Thuộc tính outline-offset

Thuộc tính outline-offset thiết lập khoảng đệm cho đường viền ngoài - ranh giới không chiếm không gian. Giá trị của thuộc tính là bất kỳ đơn vị kích thước nào, ngoại trừ phần trăm. Giá trị mặc định: 0. Giá trị dương dịch chuyển đường viền ra ngoài phần tử, giá trị âm - vào bên trong.

Cú pháp

bộ chọn {
	outline-offset: giá trị;
}

Ví dụ . Giá trị dương

Đường viền được đặt cách phần tử (được tô nền):

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

#elem {
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Ví dụ . Giá trị âm

Đường viền nằm bên trong phần tử:

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

#elem {
	outline-offset: -10px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Ví dụ . Giá trị âm của outline + border

Có thể tạo hiệu ứng thú vị như sau (lưu ý độ dày của khoảng trắng giữa các đường viền, nó là 10px, chứ không phải 14, vì một phần bị outline với độ dày 4px chiếm mất):

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

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

Xem thêm

thuộc tính outline-width,
thiết lập độ dày đường viền
thuộc tính outline-style,
thiết lập kiểu đường viền
thuộc tính outline-color,
thiết lập màu đường viền
thuộc tính outline,
là thuộc tính viết tắt cho đường viền