CSS 轮廓样式设置
# CSS 轮廓样式设置
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。轮廓不会占据空间，不会影响元素的大小或布局。
# 1. 基本概念
- Outline Style：轮廓的样式。
- Outline Color：轮廓的颜色。
- Outline Width：轮廓的宽度。
- Outline Offset：轮廓相对于边框的偏移量。
# 2. 所有CSS 轮廓（outline）属性
- outline-style: 规定轮廓线的样式。
- outline-color: 规定轮廓线的颜色。
- outline-width: 规定轮廓线的宽度。
- outline-offset: 规定轮廓线与边框边缘的距离。
- outline: 是 outline-style、outline-width 和 outline-color 的简写。
"CSS" 列中的数字表示哪个CSS版本定义了该属性（CSS1 或者CSS2）。
# 3. 轮廓样式（outline-style）
outline-style 属性设置轮廓的样式。可以用的值有：
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 轮廓样式示例</title>
<style>
p.none {outline-style: none;} /* 无轮廓 */
p.dotted {outline-style: dotted;} /* 虚线轮廓 */
p.dashed {outline-style: dashed;} /* 虚线轮廓 */
p.solid {outline-style: solid;} /* 实线轮廓 */
p.double {outline-style: double;} /* 双线轮廓 */
p.groove {outline-style: groove;} /* 凹槽轮廓 */
p.ridge {outline-style: ridge;} /* 垄状轮廓 */
p.inset {outline-style: inset;} /* 嵌入轮廓 */
p.outset {outline-style: outset;} /* 外凸轮廓 */
</style>
</head>
<body>
<p class="none">无轮廓。</p>
<p class="dotted">虚线轮廓。</p>
<p class="dashed">虚线轮廓。</p>
<p class="solid">实线轮廓。</p>
<p class="double">双线轮廓。</p>
<p class="groove">凹槽轮廓。</p>
<p class="ridge">垄状轮廓。</p>
<p class="inset">嵌入轮廓。</p>
<p class="outset">外凸轮廓。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 4. 轮廓颜色（outline-color）
outline-color 属性设置轮廓的颜色。可以使用颜色名称、RGB值或十六进制值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 轮廓颜色示例</title>
<style>
p.one {outline-style: solid; outline-color: red;} /* 红色轮廓 */
p.two {outline-style: solid; outline-color: #00ff00;} /* 绿色轮廓 */
p.three {outline-style: solid; outline-color: rgb(0, 0, 255);} /* 蓝色轮廓 */
</style>
</head>
<body>
<p class="one">红色轮廓。</p>
<p class="two">绿色轮廓。</p>
<p class="three">蓝色轮廓。</p>
<p><b>注意:</b> "outline-color" 属性如果单独使用则不起作用。要先使用 "outline-style" 属性来设置轮廓样式。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 5. 轮廓宽度（outline-width）
outline-width 属性设置轮廓的宽度。可以用的值有：thin、medium、thick 以及具体的长度值（如 2px、0.1em）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 轮廓宽度示例</title>
<style>
p.one {outline-style: solid; outline-width: 5px;} /* 5px宽度 */
p.two {outline-style: solid; outline-width: medium;} /* 中等宽度 */
p.three {outline-style: solid; outline-width: thin;} /* 薄轮廓 */
</style>
</head>
<body>
<p class="one">5px宽度的轮廓。</p>
<p class="two">中等宽度的轮廓。</p>
<p class="three">薄轮廓。</p>
<p><b>注意:</b> "outline-width" 属性如果单独使用则不起作用。要先使用 "outline-style" 属性来设置轮廓样式。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 6. 轮廓偏移（outline-offset）
outline-offset 属性设置轮廓与边框边缘的距离。这可以用于创建一些视觉上的间距效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 轮廓偏移示例</title>
<style>
p {
outline-style: solid; /* 设置轮廓样式为实线 */
outline-width: 2px; /* 设置轮廓宽度为2px */
outline-color: blue; /* 设置轮廓颜色为蓝色 */
outline-offset: 10px; /* 设置轮廓偏移为10px */
}
</style>
</head>
<body>
<p>这个段落有一个轮廓，轮廓与边框之间有10px的间距。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 7. 轮廓的简写属性（outline）
outline 属性是 outline-style、outline-width 和 outline-color 的简写。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 轮廓简写示例</title>
<style>
p {
outline: 2px solid red; /* 简写方式设置轮廓：2px宽度，实线，红色 */
}
</style>
</head>
<body>
<p>这个段落使用简写方式设置轮廓。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05