CSS的outline属性用于设置元素的轮廓样式，轮廓是绘制于元素边缘外围的一条线。它与边框不同，不占据空间，并且不会改变元素的尺寸或位置。outline属性通常用于突出显示元素，例如当元素获得焦点或被点击时。

语法

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

• outline-color: 指定轮廓的颜色。可以使用具体的颜色值，如red、#000000，也可以使用transparent使其透明。
• outline-style: 指定轮廓的样式，可以是实线（solid）、虚线（dotted）、双线（double）、点线（dashed）或无样式（none）。
• outline-width: 指定轮廓的宽度，可以是像素值（px）、百分比（%）或预定义的宽度（thin、medium、thick）。

示例

.outlined-element {
  outline: 2px solid red;
}

上述示例将带有outlined-element类的元素的轮廓设置为2像素宽的红色实线。这样，该元素在获得焦点或被点击时，将出现红色的边框效果。

.outlined-element {
  outline: 1px dotted blue;
}

上述示例将带有outlined-element类的元素的轮廓设置为1像素宽的蓝色虚线。这样，该元素在某些情况下可以突出显示，并显示为虚线样式。

备注

• outline属性可以同时设置多个值，通过空格分隔。例如：outline: 2px solid red dotted; 可以同时设置轮廓的宽度、颜色、样式。
• 如果只想设置轮廓的某个属性，可以使用缩写或单独的outline-color、outline-style、outline-width属性。
• 轮廓不会对元素布局产生影响，因此不会导致其他元素的位置变化。
• 轮廓只会绘制在元素的边缘之外，而不是替代边框。如果同时设置了轮廓和边框，它们会分别显示。
• outline-offset属性可以用于设置轮廓与元素边缘之间的距离，可以使用负值将轮廓绘制在元素内部。

总结

CSS的outline属性可以用于设置元素的轮廓样式，可以使用不同的颜色、样式和宽度来为元素创建视觉效果。它通常用于突出显示用户交互的元素，如链接、按钮和表单字段，以提高用户体验。