CSS 轮廓（outline）属性是用于在元素周围绘制一条线的样式属性。它位于元素边框的外围，主要用于突出显示元素，常用于焦点状态或调试布局时。以下是关于 CSS 轮廓属性的详细学习笔记。
一、轮廓（Outline）概述
轮廓是绘制在元素周围的线条，位于边框边缘的外围。它与边框不同，轮廓不会占据空间，也不会影响页面的布局。轮廓的主要用途是突出显示元素，例如在元素获得焦点时提供视觉反馈。
二、轮廓的属性
CSS 提供了以下轮廓相关属性，用于设置轮廓的样式、颜色和宽度：
1. outline
-
功能：在一个声明中设置所有的轮廓属性，包括轮廓的颜色、样式和宽度。
-
语法：
css
复制
outline: outline-color outline-style outline-width; -
示例：
css
复制
p { outline: 2px solid red; }
2. outline-color
-
功能：设置轮廓的颜色。
-
值：
-
颜色名称（如
red、blue等） -
十六进制颜色值（如
#ff0000） -
RGB 颜色值（如
rgb(255, 0, 0)） -
invert（用于提高对比度，通常用于焦点状态） -
inherit（继承父元素的颜色）
-
-
示例：
css
复制
p { outline-color: #00ff00; }
3. outline-style
-
功能：设置轮廓的样式。
-
值：
-
none：无轮廓 -
dotted：点状轮廓 -
dashed：虚线轮廓 -
solid：实线轮廓 -
double：双线轮廓 -
groove：3D 凹槽轮廓 -
ridge：3D 垄状轮廓 -
inset：3D 内嵌轮廓 -
outset：3D 外嵌轮廓 -
inherit：继承父元素的轮廓样式
-
-
示例：
css
复制
p { outline-style: dashed; }
4. outline-width
-
功能：设置轮廓的宽度。
-
值：
-
thin：细轮廓 -
medium：中等宽度轮廓 -
thick：粗轮廓 -
长度值（如
2px、5em等） -
inherit：继承父元素的轮廓宽度
-
-
示例：
css
复制
p { outline-width: 4px; }
三、轮廓与边框的区别
-
空间占用：轮廓不会占据空间，不会影响页面布局；边框会占据空间，会影响页面布局。
-
显示位置：轮廓位于边框的外围；边框位于元素的边界内。
-
用途：轮廓主要用于突出显示元素，常用于焦点状态；边框用于定义元素的边界，常用于装饰和分隔内容。
四、使用场景
1. 焦点状态
轮廓常用于元素获得焦点时，提供视觉反馈。例如，当用户使用键盘导航时，可以为当前焦点的元素添加轮廓，以便用户清楚地知道当前操作的元素。
css
复制
input:focus {
outline: 2px solid blue;
}2. 调试布局
在开发过程中，轮廓可以用于调试布局，帮助开发者清晰地看到元素的边界。
css
复制
div {
outline: 1px solid red;
}