CSS - outline-offset 屬性

CSS 的 **outline-offset** 屬性用於指定元素輪廓與其邊框邊緣之間的空間。輪廓和元素之間的空間是透明的。

語法

outline-offset: length | initial | inherit;

屬性值

值	描述
長度	使用長度單位（例如 px、em、rem 等）設定元素邊緣和輪廓之間的間隙。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS 輪廓偏移屬性示例

以下示例說明了使用不同值的 **outline-offset** 屬性。

使用 Px 值的輪廓偏移屬性

要設定元素與其輪廓之間的間隙，我們可以使用長度單位（例如 px、rem、cm 等）指定間隙長度。在以下示例中，使用了 px 值。

示例

<!DOCTYPE html>
<html>

<head>
  <style>
    .example {
      margin: 20px;
      padding: 10px;
      text-align: center;
      border: 4px dashed #000;
      background-color: #08ff90;
      outline: 4px solid #666;
      
    }
    .ex1{
      outline-offset: 7px;
    }
    .ex2{
      outline-offset: 10px;
    }
  </style>
</head>
<body>
  <h2>
    CSS outline-offset property
  </h2>
  <h4>
    outline-offset: 7px
  </h4>
  <div class="example ex1">
    The outline-offset is 7px
  </div>
  <h4>
    outline-offset: 10px
  </h4>
  <div class="example ex2">
    The outline-offset is 10px
  </div>
</body>
</html>

使用 Em 值的輪廓偏移屬性

要設定元素與其輪廓之間的間隙，我們可以使用長度單位（例如 px、rem、cm 等）指定間隙長度。在以下示例中，使用了 em 值。

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .example {
      margin: 20px;
      padding: 10px;
      text-align: center;
      border: 4px dashed #000;
      background-color: #08ff90;
      outline: 4px solid #666;
      outline-offset: 1em;
    }
        
  </style>
</head>
<body>
  <h2>
    CSS outline-offset property
  </h2>
  <h4>
    outline-offset: 1em
  </h4>
  <div class="example ex1">
    The outline-offset is 1em
  </div>
</body>
</html>

支援的瀏覽器

屬性
outline-offset	4.0	15.0	3.5	3.1	10.5

css_properties_reference.htm

列印頁面