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>;其中 <style> 可以是以下值之一:
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 属性设置为 none 或 hidden,那么无论 outline-width 和 outline-color 属性设置为什么值,元素都不会显示轮廓。