CSS3 盒模型 - outline-offset 属性

核心知识点

• outline-offset 属性的语法和用法
• outline-offset 属性的取值范围
• outline-offset 属性的实际应用场景
• outline-offset 属性与其他轮廓属性的关系

学习目标

• 理解 outline-offset 属性的基本概念和作用
• 掌握 outline-offset 属性的语法和取值规则
• 能够使用 outline-offset 属性设置元素的轮廓偏移
• 了解 outline-offset 属性与其他轮廓属性的关系

什么是 outline-offset 属性？

outline-offset 属性是 CSS3 中用于设置元素轮廓与元素边框之间距离的属性。轮廓（outline）是绘制在元素边框外的一条线，用于在元素获得焦点时突出显示该元素。通过 outline-offset 属性，您可以控制轮廓与元素边框之间的距离，从而创建出更多样化的视觉效果。

outline-offset 属性的语法

outline-offset: <length>;

其中 <length> 可以是以下值之一：

• 正长度值：如 1px、2px、3px 等，使轮廓向外偏移
• 负长度值：如 -1px、-2px、-3px 等，使轮廓向内偏移
• 0：默认值，轮廓与边框重合

outline-offset 属性的取值范围

长度值

• 像素值：如 1px、2px、3px 等，最常用的单位
• em：相对于元素的字体大小，如 0.1em、0.2em 等
• rem：相对于根元素的字体大小，如 0.1rem、0.2rem 等
• 其他长度单位：如 pt、cm、mm 等

正负值的含义

• 正值：轮廓向外偏移，远离元素边框
• 负值：轮廓向内偏移，靠近元素边框，甚至可以偏移到元素内部
• 0：轮廓与边框重合，这是默认值

outline-offset 属性的实际应用

示例 1：设置不同偏移量的轮廓

/* 没有偏移，轮廓与边框重合 */
.no-offset {
  border: 2px solid #333;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: 0;
}

/* 向外偏移 4px */
.positive-offset {
  border: 2px solid #333;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: 4px;
}

/* 向外偏移 8px */
.large-offset {
  border: 2px solid #333;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: 8px;
}

/* 向内偏移 2px */
.negative-offset {
  border: 2px solid #333;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: -2px;
}

示例 2：使用相对单位设置偏移量

/* 使用 em 单位设置偏移量 */
.em-offset {
  border: 2px solid #333;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: 0.5em;
}

/* 使用 rem 单位设置偏移量 */
.rem-offset {
  border: 2px solid #333;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: 0.25rem;
}

示例 3：轮廓偏移与不同轮廓样式的组合

/* 实线轮廓向外偏移 */
.solid-offset {
  border: 2px solid #333;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: 4px;
}

/* 虚线轮廓向外偏移 */
.dashed-offset {
  border: 2px solid #333;
  outline-style: dashed;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: 4px;
}

/* 点线轮廓向外偏移 */
.dotted-offset {
  border: 2px solid #333;
  outline-style: dotted;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: 4px;
}

示例 4：多重轮廓效果

/* 利用边框和轮廓创建双重边框效果 */
.double-border {
  border: 2px solid #333;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: 4px;
}

/* 利用多重元素创建多重轮廓效果 */
.multiple-outlines {
  position: relative;
  border: 2px solid #333;
  padding: 20px;
}

.multiple-outlines::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border: 2px solid #ff6347;
}

.multiple-outlines::after {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  border: 2px solid #4682b4;
}

outline-offset 属性与其他轮廓属性的关系

outline-offset 属性是轮廓相关的属性之一，与其他轮廓属性配合使用：

• outline-width：设置轮廓的宽度
• outline-style：设置轮廓的样式
• outline-color：设置轮廓的颜色

这些属性可以通过 outline 简写属性来同时设置，但 outline-offset 不能包含在简写属性中，需要单独设置：

/* 先设置 outline 简写属性 */
outline: 2px solid #333;
/* 再单独设置 outline-offset */
outline-offset: 4px;

轮廓与边框的区别

实践练习

练习 1：创建带有不同偏移量的按钮

创建一个 HTML 页面，包含以下按钮：

• 一个没有偏移的按钮
• 一个向外偏移 4px 的按钮
• 一个向外偏移 8px 的按钮
• 一个向内偏移 2px 的按钮

练习 2：创建双重边框效果

创建一个 HTML 页面，包含一个带有双重边框效果的卡片：

• 内边框：2px 实线 #333
• 外轮廓：2px 实线 #ff6347
• 轮廓偏移：4px
• 卡片内容：包含标题和段落文本

练习 3：创建带有动态偏移效果的元素

创建一个 HTML 页面，包含一个元素，当鼠标悬停时，轮廓偏移量发生变化：

• 正常状态：轮廓偏移 2px
• 悬停状态：轮廓偏移 6px

总结

本教程详细介绍了 CSS3 中的 outline-offset 属性，包括其语法、取值范围和实际应用。通过本教程的学习，您应该能够：

• 理解 outline-offset 属性的基本概念和作用
• 掌握 outline-offset 属性的语法和取值规则
• 能够使用 outline-offset 属性设置元素的轮廓偏移
• 了解 outline-offset 属性与其他轮廓属性的关系

outline-offset 属性是 CSS3 中用于设置元素轮廓偏移的重要属性，它可以帮助您控制轮廓与元素边框之间的距离，从而创建出更多样化的视觉效果。在实际开发中，您可以根据需要选择合适的偏移量，创建出美观的页面效果。

需要注意的是，outline-offset 属性只有在 outline-style 属性设置为非 none 或 hidden 的值时才会生效。如果 outline-style 属性设置为 none 或 hidden，那么无论 outline-offset 属性设置为什么值，元素都不会显示轮廓。