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

打印页面