Przesunięcie konturu CSS

Przesunięcie konturu CSS

outline-offset Atrybut dodaje przestrzeń między konturem elementu a jego ramką. Przestrzeń między elementem a jego konturem jest przezroczysta.

Poniższy przykład określa kontur 25px poza krawędzią ramki:

Ten odcinek ma kontur 25px poza krawędzią ramki.

Przykład

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

亲自试一试

Poniższy przykład pokazuje, że przestrzeń między elementem a jego konturem jest przezroczysta:

Ten odcinek ma kontur 25px poza krawędzią ramki.

Przykład

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 设置轮廓的宽度。