CSS 轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

下例指定边框边缘外 25px 的轮廓：

此段落的边框外有 25px 的轮廓。

代码：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>
<h1>outline-offset 属性</h1>
<p>本段落在边框边缘外 15 像素处有一条轮廓线。</p>
</body>
</html>

运行一下

下例显示元素与其轮廓之间的空间是透明的：

本段在边框边缘外的轮廓为 25px。

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  background:yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>
<h1>outline-offset 属性</h1>
<p>本段落在边框边缘外 15 像素处有一条轮廓线。</p>
</body>
</html>

运行一下

所有 CSS 轮廓属性

属性	描述
outline	简写属性，在一条声明中设置 outline-width、outline-style 以及 outline-color。
outline-color	设置轮廓的颜色。
outline-offset	指定轮廓与元素的边缘或边框之间的空间。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。

CSS 轮廓偏移

CSS 轮廓偏移

所有 CSS 轮廓属性

分类导航