CSS outline属性介绍

简介

CSS outline 属性是一个简单的用于在 HTML 元素周围绘制框（轮廓）的属性。与 border 属性不同，outline 不占据空间，不影响元素的大小或位置。大多数情况下，outline 用于突出显示用户正在与之交互的元素。

语法

outline 属性的基本语法如下：

outline: [outline-color] [outline-style] [outline-width];

也可以使用简写语法指定所有三个属性值：

outline: [outline-width] [outline-style] [outline-color];

其中：

• outline-color：可选，用于指定轮廓的颜色。默认值为当前元素的文本颜色。该值可以是任何有效的 CSS 颜色值。
• outline-style：可选，用于指定轮廓的样式。默认值为 none，表示不显示轮廓。该值可以是下列合法值之一：
  • dotted：点线轮廓。
  • dashed：虚线轮廓。
  • solid：实线轮廓。
  • double：双实线轮廓。
  • groove：3D 凹陷轮廓。
  • ridge：3D 凸起轮廓。
  • inset：3D 向内的轮廓。
  • outset：3D 向外的轮廓。
• outline-width：可选，用于指定轮廓的宽度。默认值为 medium，通常为 3px 左右。该值可以是任何 CSS 长度值。

实例

以下是一些示例，演示了 outline 属性的使用：

1. 基本用法

p {
  outline: 2px solid red;
}

该示例会在 p 元素周围绘制一条 2px 宽的红色实线轮廓。

2. 简写语法

h1 {
  outline: dotted 1px blue;
}

该示例使用简写语法指定样式、宽度和颜色，绘制了一条 1px 宽的蓝色点线轮廓。

总结

CSS outline 属性是一种简单而有效的用于突出显示 HTML 元素的方法。它不占据空间，不影响布局，因此可以随时使用。但需要小心，因为当过度使用时，它可能会分散用户的注意力并使界面更加混乱。