CSS 轮廓(Outline)
CSS 轮廓（outline）虽然看起来和边框（border）相似，但它有独特的用途和优势。
轮廓最常见的用途是显示元素的焦点状态，特别是对于键盘导航用户（如使用Tab键切换焦点时）。
此元素拥有黑色边框和蓝色轮廓，CSS 轮廓（outline）宽度为 10px。
轮廓与边框的区别
- 不占据空间：轮廓不占用布局空间，不影响元素尺寸或位置。
- 可围绕整个元素：轮廓可以围绕在边框外围。
- 不支持圆角：轮廓不能应用
border-radius效果。 - 不能单独设置各边：不能像边框那样单独设置上、右、下、左边。
基本轮廓属性
1. 轮廓样式（outline-style）
轮廓样式（outline-style），类似于边框样式（border-style），可选值（除了none默认值）如下：
dotted (点状)
dashed (虚线)
solid (实线)
double (双线)
groove (3D凹槽)
ridge (3D凸槽)
inset (3D内嵌)
outset (3D外嵌)
你可以通过以下代码实现轮廓样式（outline-style）的调用：
div {
outline-style: dotted;
}2. 轮廓宽度（outline-width）
轮廓宽度（outline-width），类似于边框宽度（border-width），可选值如下：
thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
4px
2pt
0.1cm
0.3em
0.3rem
你可以通过以下代码实现轮廓宽度（outline-width）的调用：
div {
outline-width: 5px;
}3. 轮廓颜色（outline-color）
轮廓颜色（outline-color），类似于边框颜色（border-color），可选值如下：
颜色名（红色）
十六进制值（#008aff）
RGB 值 rgb(24 203 24)
HSL 值 hsl(280, 100%, 50%)
你可以通过以下代码实现轮廓颜色（outline-color）的调用：
div {
outline-color: 5px;
}4. 轮廓偏移（outline-offset）
轮廓偏移（outline-offset）是在元素的边框和轮廓之间创造间距，让轮廓与元素本身隔开。可选值如下：
我有8px的轮廓偏移
你可以通过以下代码实现轮廓偏移（outline-offset）的调用：
div {
outline: 2px solid #333;
outline-offset: 10px;
}
评论区 0
发表评论
教程介绍
CSS 层叠样式表（Cascading Style Sheets），一种用于为 HTML 或 XML 添加样式的语言。
36
章节
52
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈