CSS 輪廓偏移

CSS 輪廓偏移

outline-offset 屬性在元素的輪廓與邊框之間添加空間。元素及其輪廓之間的空間是透明的。

下例指定邊框邊緣外 25px 的輪廓:

此段落的邊框外有 25px 的輪廓。

實例

p {
  margin: 50px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

親自試一試

下例顯示元素與其輪廓之間的空間是透明的:

本段在邊框邊緣外的輪廓為 25px。

實例

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

親自試一試

所有 CSS 輪廓屬性

屬性 描述
outline 簡寫屬性,在一條聲明中設置 outline-width、outline-style 以及 outline-color。
outline-color 設置輪廓的顏色。
outline-offset 指定輪廓與元素的邊緣或邊框之間的空間。
outline-style 設置輪廓的樣式。
outline-width 設置輪廓的寬度。