CSS 轮廓偏移 详解
css3基础 2022-05-23 12:03:01小码哥的IT人生shichen
CSS 轮廓偏移
CSS 轮廓偏移
outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
下例指定边框边缘外 25px 的轮廓：
此段落的边框外有 25px 的轮廓。
示例代码：
p {
margin: 50px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
下例显示元素与其轮廓之间的空间是透明的：
本段在边框边缘外的轮廓为 25px。
示例代码：
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有 CSS 轮廓属性
| 属性 | 描述 |
|---|---|
| outline | 简写属性，在一条声明中设置 outline-width、outline-style 以及 outline-color。 |
| outline-color | 设置轮廓的颜色。 |
| outline-offset | 指定轮廓与元素的边缘或边框之间的空间。 |
| outline-style | 设置轮廓的样式。 |
| outline-width | 设置轮廓的宽度。 |
