CSS3 盒模型 - outline-width 属性

核心知识点

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

学习目标

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

什么是 outline-width 属性？

outline-width 属性是 CSS3 中用于设置元素轮廓宽度的属性。轮廓（outline）是绘制在元素边框外的一条线，用于在元素获得焦点时突出显示该元素。与边框（border）不同，轮廓不会影响元素的布局，也不会占用空间。

outline-width 属性的语法

outline-width: <width>;

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

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

outline-width 属性的取值范围

长度值

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

关键字值

• thin：细轮廓，通常相当于 1px
• medium：中等轮廓，通常相当于 2px，也是默认值
• thick：粗轮廓，通常相当于 3px 或 4px

outline-width 属性的实际应用

示例 1：设置不同宽度的轮廓

/* 设置细轮廓 */
.thin-outline {
  outline-style: solid;
  outline-width: thin;
  outline-color: #333;
}

/* 设置中等轮廓 */
.medium-outline {
  outline-style: solid;
  outline-width: medium;
  outline-color: #333;
}

/* 设置粗轮廓 */
.thick-outline {
  outline-style: solid;
  outline-width: thick;
  outline-color: #333;
}

/* 设置具体像素宽度的轮廓 */
.pixel-outline {
  outline-style: solid;
  outline-width: 4px;
  outline-color: #333;
}

示例 2：使用相对单位设置轮廓宽度

/* 使用 em 单位设置轮廓宽度 */
.em-outline {
  font-size: 16px;
  outline-style: solid;
  outline-width: 0.2em; /* 相当于 3.2px */
  outline-color: #333;
}

/* 使用 rem 单位设置轮廓宽度 */
.rem-outline {
  outline-style: solid;
  outline-width: 0.1rem; /* 相对于根元素字体大小 */
  outline-color: #333;
}

示例 3：轮廓与边框的组合使用

/* 同时设置边框和轮廓 */
.border-and-outline {
  border: 2px solid #333;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff6347;
  outline-offset: 4px; /* 轮廓与边框的距离 */
}

/* 仅在元素获得焦点时显示轮廓 */
.focus-outline {
  border: 2px solid #333;
}

.focus-outline:focus {
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff6347;
}

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

outline-width 属性是轮廓相关的三个基本属性之一，另外两个是：

• outline-style：设置轮廓的样式，如实线、虚线、点线等
• outline-color：设置轮廓的颜色

这三个属性可以通过 outline 简写属性来同时设置：

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

/* 示例 */
outline: 2px solid #333;

轮廓与边框的区别

实践练习

练习 1：创建带有不同宽度轮廓的按钮

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

• 一个带有细轮廓的按钮
• 一个带有中等轮廓的按钮
• 一个带有粗轮廓的按钮
• 一个带有自定义像素宽度轮廓的按钮

练习 2：创建带有焦点轮廓的表单

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

• 文本输入框
• 密码输入框
• 提交按钮

为这些元素添加焦点样式，当它们获得焦点时显示自定义宽度的轮廓。

练习 3：创建带有边框和轮廓组合效果的卡片

创建一个 HTML 页面，包含一个带有以下样式的卡片：

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

总结

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

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

outline-width 属性是 CSS3 中用于设置元素轮廓宽度的重要属性，它可以帮助您控制元素轮廓的粗细，从而调整页面的视觉效果。在实际开发中，您可以根据需要选择合适的轮廓宽度，创建出美观的页面效果。