【CSS】outline 属性

outline属性

outline 是 CSS 属性，用于设置元素的外边框样式，包括颜色、样式和宽度。外边框是一个在元素周围的轮廓，类似于边框（border），但不会占用空间，并且不会影响布局。

outline 属性可以同时设置以下三个值：

1. outline-color：用于设置外边框的颜色，可以是有效的 CSS 颜色值（如 #rrggbb、rgba()、hsl() 等）。

2. outline-style：用于设置外边框的样式，可以是以下值之一：

   • none：无样式，没有外边框。
   • dotted：虚线样式。
   • dashed：短划线样式。
   • solid：实线样式。
   • double：双线样式。
   • groove：凹槽样式。
   • ridge：脊线样式。
   • inset：内阴影样式。
   • outset：外阴影样式。

3. outline-width：用于设置外边框的宽度，可以是长度值（如像素）或关键字（如 thin、medium、thick）。

语法：

outline: outline-color outline-style outline-width;

例如，以下是设置焦点时元素外边框样式的示例：

input:focus {
  outline: 2px solid blue;
}

在上述示例中，当 <input> 元素获得焦点（被选中）时，将显示蓝色、宽度为 2 像素的实线外边框，以提供视觉上的反馈。

请注意，如果只想设置外边框的颜色，可以单独使用 outline-color 属性。如果只想设置外边框的样式和宽度，可以分别使用 outline-style 和 outline-width 属性。

outline和border的区别

outline 和 border 是 CSS 中两种不同的边框样式，它们有一些区别和用途：

1. 定位不同：

   • border：用于控制元素的实际边框，它占用页面布局空间。边框位于元素的边缘，并且可以用于分隔元素之间的空间。
   • outline：用于控制元素的虚拟边框，它不占用页面布局空间。外边框在元素的边缘外部创建一个轮廓，不会影响元素的大小和位置。

2. 占用空间：

   • border：边框会占用元素的布局空间。例如，一个元素的宽度为 100px，如果为其设置了 1px 的边框，则元素的宽度会增加为 102px。
   • outline：外边框不会占用元素的布局空间。它只是一个视觉效果，不会改变元素的实际大小。

3. 绘制方式：

   • border：边框可以绘制不同样式的线条，如实线、虚线、点线等。还可以设置边框的颜色和宽度。
   • outline：外边框通常是单一的，只能设置颜色和宽度，样式通常是固定的，不能像边框那样灵活设置。

4. 用途：

   • border：用于设置元素的实际边框，常用于分隔元素、设置边框效果等。
   • outline：常用于标记元素的状态，如焦点状态（focus），用于增强可访问性，使用户知道当前元素是否处于焦点状态。

一般来说，边框 border 用于实际的元素样式和布局，而外边框 outline 用于增强可视化和标记元素状态，如表单元素在获取焦点时显示的外边框等。