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

cssbộ 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):

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

css#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ử:

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

css#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):

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

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

Результат:

Xem thêm