在 CSS 中，可以使用 outline 属性设置轮廓。轮廓是一条位于边框边缘外围的线，不占据空间，通常用于强调元素或指示元素焦点。outline 属性可以设置轮廓的颜色、宽度和样式。
1、效果示例：
这是一个带轮廓的元素
2、HTML 代码：
<div class="outline-demo">这是一个带轮廓的元素</div>3、CSS 代码：
.outline-demo {
border: 1px solid #ccc; /* 设置元素的边框 */
outline: 2px dashed red; /* 设置轮廓的样式 */
}在上面的示例中，使用了 border 属性设置了元素的边框，然后使用 outline 属性设置了轮廓的样式。2px 是轮廓的宽度，dashed 是轮廓的样式，red 是轮廓的颜色。
还可以将 outline 属性的值设置为 none 来移除轮廓，例如：
.outline-demo {
outline: none; /* 移除轮廓 */
}除了上述示例中的样式，outline 属性还支持其他样式，例如：
- solid：实线
- dotted：点线
- double：双线
- groove：3D凹槽线
- ridge：3D凸起线
- inset：3D内嵌线
- outset：3D外凸线
通过不同的样式组合，可以创建出各种不同样式的轮廓。
4、完整代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outline-demo {
outline: 2px dashed red; /* 设置轮廓的样式 */
}
</style>
</head>
<body>
<div class="outline-demo">这是一个带轮廓的元素</div>
</body>
</html>
正文完