CSS3 盒模型 - outline 属性

核心知识点

outline 属性的语法和用法
outline 属性的取值范围
outline 属性与 border 属性的区别
outline 属性的实际应用场景

学习目标

理解 outline 属性的基本概念和作用
掌握 outline 属性的语法和取值规则
能够使用 outline 属性创建各种轮廓效果
了解 outline 属性与 border 属性的区别

什么是 outline 属性？

outline 属性是 CSS3 中用于绘制元素周围轮廓的属性。通过 outline 属性，您可以为元素添加一个轮廓，通常用于强调元素，例如当元素获得焦点时。与 border 不同，outline 不占用空间，不会影响元素的布局。

outline 属性的语法

/* 简写形式 */
outline: <outline-width> <outline-style> <outline-color>;

/* 单独设置 */
outline-width: <width>;
outline-style: <style>;
outline-color: <color>;
outline-offset: <offset>;

outline 属性的取值范围

outline-width

长度值：如 1px、2em、3rem 等
关键字：thin、medium、thick（浏览器会根据默认值进行渲染）

outline-style

none: 无轮廓
hidden: 隐藏轮廓
dotted: 点线轮廓
dashed: 虚线轮廓
solid: 实线轮廓
double: 双线轮廓
groove: 3D 凹槽轮廓
ridge: 3D 凸槽轮廓
inset: 3D 内凹轮廓
outset: 3D 外凸轮廓

outline-color

颜色名称：如 red、blue、green 等
十六进制值：如 #FF0000、#0000FF 等
RGB 值：如 rgb(255, 0, 0)、rgb(0, 0, 255) 等
RGBA 值：如 rgba(255, 0, 0, 0.5)、rgba(0, 0, 255, 0.5) 等
invert: 反转颜色（与背景颜色相反）

outline-offset

长度值：如 1px、-2px、0.5em 等
正值：轮廓向外偏移
负值：轮廓向内偏移

outline 属性的实际应用

示例 1：基本轮廓设置

/* 基本轮廓设置 */
basic-outline {
  outline: 2px solid red;
}

/* 虚线轮廓 */
dashed-outline {
  outline: 2px dashed blue;
}

/* 点线轮廓 */
dotted-outline {
  outline: 2px dotted green;
}

/* 双线轮廓 */
double-outline {
  outline: 4px double purple;
}

示例 2：带有偏移的轮廓

/* 向外偏移的轮廓 */
outset-outline {
  outline: 2px solid red;
  outline-offset: 5px;
}

/* 向内偏移的轮廓 */
inset-outline {
  outline: 2px solid blue;
  outline-offset: -2px;
}

/* 结合边框使用 */
border-outline {
  border: 2px solid black;
  outline: 2px solid red;
  outline-offset: 3px;
}

示例 3：焦点样式

/* 输入框焦点样式 */
input:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

/* 按钮焦点样式 */
button:focus {
  outline: 2px solid green;
  outline-offset: 1px;
}

/* 链接焦点样式 */
a:focus {
  outline: 2px dotted orange;
  outline-offset: 2px;
}

outline 属性与 border 属性的区别

特性	outline	border
占用空间	不占用空间，不影响布局	占用空间，影响布局
形状	通常是矩形	可以是各种形状（如圆角）
边的设置	不能单独设置各边	可以单独设置各边
偏移	可以设置偏移量	不能设置偏移量
应用场景	主要用于焦点状态和临时强调	主要用于元素的永久边框

outline 属性的实际应用场景

1. 表单元素焦点状态

为表单元素添加焦点状态的轮廓，提高用户体验：

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

2. 可访问性

为可聚焦元素添加清晰的轮廓，提高网站的可访问性：

/* 为所有可聚焦元素添加轮廓 */
:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* 为禁用的元素移除轮廓 */
:focus:disabled {
  outline: none;
}

3. 临时强调

为需要临时强调的元素添加轮廓：

/* 错误提示 */
.error {
  outline: 2px solid #ff0000;
  outline-offset: 2px;
}

/* 成功提示 */
.success {
  outline: 2px solid #00ff00;
  outline-offset: 2px;
}

4. 自定义按钮样式

为按钮添加自定义的焦点样式：

button {
  padding: 10px 20px;
  border: none;
  background-color: #0066cc;
  color: white;
  cursor: pointer;
}

button:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #0066cc;
}

实践练习

练习 1：创建不同类型的轮廓

创建一个 HTML 页面，包含以下元素：

一个带有实线轮廓的元素
一个带有虚线轮廓的元素
一个带有点线轮廓的元素
一个带有双线轮廓的元素

练习 2：创建带有偏移的轮廓

创建一个 HTML 页面，包含以下元素：

一个带有向外偏移轮廓的元素
一个带有向内偏移轮廓的元素
一个同时带有边框和轮廓的元素

练习 3：创建表单焦点样式

创建一个 HTML 页面，包含一个表单，为表单元素添加自定义的焦点样式：

输入框焦点样式
文本域焦点样式
选择框焦点样式
按钮焦点样式

总结

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

理解 outline 属性的基本概念和作用
掌握 outline 属性的语法和取值规则
能够使用 outline 属性创建各种轮廓效果
了解 outline 属性与 border 属性的区别

outline 属性是 CSS3 中用于绘制元素周围轮廓的重要属性，它可以帮助您为元素添加一个不占用空间的轮廓，通常用于强调元素，例如当元素获得焦点时。与 border 不同，outline 不影响元素的布局，这使得它在某些场景下更加适用。