文章目录
- CSS 轮廓
- 轮廓示例
- 1，在元素周围画线
- 2，设置轮廓的样式
- 3，设置轮廓的颜色
- 4，设置轮廓的宽度
- CSS 轮廓属性
CSS 轮廓
CSS轮廓是用于在元素周围绘制线条的属性，位于边框边缘的外围，可以起到突出元素的作用。轮廓的样式、颜色和宽度可以通过CSS outline属性进行规定，轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓示例
1，在元素周围画线
轮廓（outline）是CSS中的一种属性，用于在元素周围绘制一条线，这条线位于元素的边框外部，可以突出元素。
以下是一个CSS轮廓的简单示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
outline: 5px solid green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在上述代码中，div元素有一个200px的宽度和高度，红色的背景，以及一个5px宽、绿色的轮廓。这个轮廓将突出div元素，使其在页面上更加显眼。轮廓的位置完全取决于边框的位置，也就是说，如果边框是变化的，轮廓也会相应地跟随变化。
2，设置轮廓的样式
轮廓的样式、宽度和颜色都可以通过CSS outline属性进行设置。以下是一个示例：
div {
outline-style: solid;
outline-width: 5px;
outline-color: green;
}
在这个示例中，div元素的轮廓样式被设置为实线，轮廓宽度为5px，轮廓颜色为绿色。你可以将solid替换为其他轮廓样式，如dotted或dashed。你也可以使用特定的颜色值来定义轮廓的颜色。
3，设置轮廓的颜色
轮廓的颜色可以通过CSS outline-color属性进行设置。以下是一个示例：
div {
outline-color: green;
}
在这个示例中，div元素的轮廓颜色被设置为绿色。你可以使用特定的颜色值来定义轮廓的颜色，例如：red、#333、rgb(255,0,0)等。
4，设置轮廓的宽度
轮廓的宽度可以通过CSS outline-width属性进行设置。以下是一个示例：
div {
outline-width: 5px;
}
在这个示例中，div元素的轮廓宽度被设置为5像素。你可以使用具体的像素值、百分比值或关键字（如thin、medium或thick）来定义轮廓的宽度。
CSS 轮廓属性
| 属性 | 说明 | 可能值 |
|---|---|---|
| outline-color | 设置轮廓的颜色 | 颜色名称（如 red）、十六进制颜色代码（如 #FF0000）、rgb值（如 rgb(255,0,0)）或 rgba 值（如 rgba(255,0,0,0.5)） |
| outline-style | 设置轮廓的样式 | solid（实线）、dotted（点线）、dashed（虚线）、double（双线）、groove（凹槽）、ridge（垄脊）、inset（内嵌）、outset（外凸）或 none（无轮廓） |
| outline-width | 设置轮廓的宽度 | 像素值、百分比值或 thin、medium、thick 等关键字 |
| outline-offset | 设置轮廓与元素边框之间的距离 | 像素值或正值百分比 |
| outline | 一个声明中设置所有的轮廓属性 | 如outline: 2px solid red;，表示轮廓宽度为2像素、实线样式、红色 |
