📌  相关文章
📜  HTML | DOM 样式 outlineOffset 属性(1)

📅  最后修改于: 2023-12-03 15:15:36.738000             🧑  作者: Mango

HTML | DOM 样式 outlineOffset 属性

outlineOffset 属性用于设置外轮廓与元素边缘之间的间距。外轮廓是指围绕元素边框的一条线，常用于为元素添加焦点或高亮效果。

语法
selector {
  outline-offset: length;
}
  • selector：要应用样式的元素选择器。
  • length：指定外轮廓与元素边缘之间的间距。可以使用绝对长度值（如 px、cm、em）或百分比（相对于元素的宽度）。
可取值
  • length：指定元素外轮廓与边框之间的间距，可以是正数、负数或零。正数会使外轮廓扩大，负数会使外轮廓缩小。
示例
<!DOCTYPE html>
<html>
<head>
  <style>
    .outline {
      width: 200px;
      height: 100px;
      border: 2px solid red;
      outline: 4px solid blue;
      outline-offset: 10px;
    }
  </style>
</head>
<body>
  <div class="outline">示例文本</div>
</body>
</html>

在上述示例中，我们创建了一个具有红色边框和蓝色外轮廓的 div 元素。通过设置 outline-offset 属性为 10px，我们指定了外轮廓与元素边缘之间的间距为 10px，从而使外轮廓向内缩进。

注意事项
  • outline-offset 属性仅在使用 outline 属性时才会生效，如果没有使用 outline 属性，设置 outline-offset 是没有任何效果的。
浏览器兼容性

outline-offset 属性在以下浏览器中得到支持：

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Edge
参考链接