CSS3 盒模型 - outline-style 属性

核心知识点

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

学习目标

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

什么是 outline-style 属性?

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

outline-style 属性的语法

outline-style: <style>;

其中 &lt;style&gt; 可以是以下值之一:

  • none:无边框
  • hidden:隐藏边框(与 none 类似,但在表格边框合并时有所不同)
  • solid:实线边框
  • dashed:虚线边框
  • dotted:点线边框
  • double:双线边框
  • groove:3D 凹槽边框
  • ridge:3D 凸槽边框
  • inset:3D 内凹边框
  • outset:3D 外凸边框

outline-style 属性的取值范围

基本轮廓样式

  • none:无边框,这是默认值
  • hidden:隐藏边框,与 none 类似,但在表格边框合并时有所不同
  • solid:实线边框,最常用的样式
  • dashed:虚线边框,由一系列短划线组成
  • dotted:点线边框,由一系列点组成
  • double:双线边框,由两条平行的实线组成

3D 轮廓样式

  • groove:3D 凹槽边框,看起来像是刻在表面的凹槽
  • ridge:3D 凸槽边框,看起来像是从表面凸起的脊
  • inset:3D 内凹边框,看起来像是元素被嵌入到表面
  • outset:3D 外凸边框,看起来像是元素从表面凸起

outline-style 属性的实际应用

示例 1:基本轮廓样式

/* 实线轮廓 */
.solid-outline {
  outline-style: solid;
  outline-width: 2px;
  outline-color: #333;
}

/* 虚线轮廓 */
.dashed-outline {
  outline-style: dashed;
  outline-width: 2px;
  outline-color: #333;
}

/* 点线轮廓 */
.dotted-outline {
  outline-style: dotted;
  outline-width: 2px;
  outline-color: #333;
}

/* 双线轮廓 */
.double-outline {
  outline-style: double;
  outline-width: 4px;
  outline-color: #333;
}

示例 2:3D 轮廓样式

/* 凹槽轮廓 */
.groove-outline {
  outline-style: groove;
  outline-width: 4px;
  outline-color: #FFA500;
}

/* 凸槽轮廓 */
.ridge-outline {
  outline-style: ridge;
  outline-width: 4px;
  outline-color: #800080;
}

/* 内凹轮廓 */
.inset-outline {
  outline-style: inset;
  outline-width: 4px;
  outline-color: #008080;
}

/* 外凸轮廓 */
.outset-outline {
  outline-style: outset;
  outline-width: 4px;
  outline-color: #FFC0CB;
}

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

/* 同时设置边框和轮廓 */
.border-and-outline {
  border: 2px solid #333;
  outline-style: dashed;
  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;
}

示例 4:移除轮廓

/* 移除轮廓 */
.no-outline {
  outline-style: none;
}

/* 或 */
.no-outline-alt {
  outline: none;
}

/* 移除表单元素的默认轮廓 */
input:focus, textarea:focus, select:focus {
  outline-style: none;
  /* 可以添加自定义的焦点样式 */
  border: 2px solid #ff6347;
}

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

outline-style 属性是轮廓相关的三个基本属性之一,另外两个是:

  • outline-width:设置轮廓的宽度
  • outline-color:设置轮廓的颜色

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

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

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

轮廓与边框的区别

特性 边框 (border) 轮廓 (outline)
占用空间 是,影响布局 否,不影响布局
绘制位置 在元素内容和内边距之外 在元素边框之外
可设置各个边 是,可单独设置四个边 否,只能同时设置四个边
圆角效果 是,可通过 border-radius 设置 否,始终是矩形
常用场景 元素的永久视觉效果 元素获得焦点时的临时高亮

实践练习

练习 1:创建带有不同样式轮廓的按钮

创建一个 HTML 页面,包含以下按钮:

  • 一个带有实线轮廓的按钮
  • 一个带有虚线轮廓的按钮
  • 一个带有点线轮廓的按钮
  • 一个带有双线轮廓的按钮

练习 2:创建带有 3D 轮廓效果的卡片

创建一个 HTML 页面,包含以下卡片:

  • 一个带有 groove 轮廓的卡片
  • 一个带有 ridge 轮廓的卡片
  • 一个带有 inset 轮廓的卡片
  • 一个带有 outset 轮廓的卡片

练习 3:创建自定义表单焦点样式

创建一个 HTML 页面,包含以下表单元素:

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

为这些元素添加自定义的焦点样式,使用不同的轮廓样式和颜色。

总结

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

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

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

需要注意的是,轮廓样式只有在 outline-width 属性设置为非 0 值时才会显示。如果 outline-style 属性设置为 nonehidden,那么无论 outline-width 和 outline-color 属性设置为什么值,元素都不会显示轮廓。

« 上一篇 CSS3 盒模型 - outline-width 属性 下一篇 » CSS3 盒模型 - outline-color 属性