前端三剑客
CSS

CSS 边框样式设置

# CSS 边框样式设置

# 1. CSS 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

# 2. 边框样式

边框样式属性指定要显示什么样的边界。

border-style属性用来定义边框的样式

border-style 值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS 边框示例</title> 
<style>
p.none {border-style:none;} /* 无边框 */
p.dotted {border-style:dotted;} /* 虚线边框 */
p.dashed {border-style:dashed;} /* 虚线边框 */
p.solid {border-style:solid;} /* 实线边框 */
p.double {border-style:double;} /* 双边框 */
p.groove {border-style:groove;} /* 凹槽边框 */
p.ridge {border-style:ridge;} /* 垄状边框 */
p.inset {border-style:inset;} /* 嵌入边框 */
p.outset {border-style:outset;} /* 外凸边框 */
p.hidden {border-style:hidden;} /* 隐藏边框 */
p.mix {border-style: dotted dashed solid double;} /* 混合边框 */
</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>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框</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
32
33
34
35

# 3. 边框宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick、medium（默认值）和 thin。

注意： CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS 边框宽度示例</title>
<style>
p.one {
    border-style: solid; /* 必须设置边框样式 */
    border-width: 5px; /* 设置边框宽度为5px */
}
p.two {
    border-style: solid; /* 必须设置边框样式 */
    border-width: medium; /* 设置边框宽度为中等 */
}
p.three {
    border-style: solid; /* 必须设置边框样式 */
    border-width: 1px; /* 设置边框宽度为1px */
}
</style>
</head>

<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</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

# 4. 边框颜色

border-color 属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"

您还可以设置边框的颜色为 "transparent"。

注意： border-color 单独使用是不起作用的，必须得先使用 border-style 来设置边框样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS 边框颜色示例</title>
<style>
p.one {
    border-style: solid; /* 必须设置边框样式 */
    border-color: red; /* 设置边框颜色为红色 */
}
p.two {
    border-style: solid; /* 必须设置边框样式 */
    border-color: #98bf21; /* 设置边框颜色为十六进制的绿色 */
} 
</style>
</head>

<body>
<p class="one">实线红色边框</p>
<p class="two">实线绿色边框</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。</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

# 5. 边框-单独设置各边

在CSS中，可以为不同的边设置不同的边框样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS 单独设置边框示例</title>
<style>
p {
    border-top-style: dotted; /* 上边框为虚线 */
    border-right-style: solid; /* 右边框为实线 */
    border-bottom-style: dotted; /* 下边框为虚线 */
    border-left-style: solid; /* 左边框为实线 */
}
</style>
</head>

<body>
<p>两个不同的边界样式。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

上面的例子也可以通过设置一个单一的 border-style 属性来实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS 单独设置边框示例</title>
<style>
p {
    border-style: dotted solid; /* 上、下边框为虚线，左、右边框为实线 */
}
</style>
</head>

<body>
<p>两个不同的边界样式。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

border-style 属性可以有1-4个值：

border-style: dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style: dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style: dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
border-style: dotted;
- 四面边框是 dotted

上面的例子使用了 border-style。然而，它也可以与 border-width、border-color 一起使用。

# 6. 边框-简写属性

上面的例子使用了多个属性来设置边框。

你也可以在一个属性中设置边框。

你可以在 "border" 属性中设置：

border-width
border-style (required)
border-color

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS 边框简写示例</title>
<style>
p {
    border: 5px solid red; /* 边框宽度为5px，实线，红色 */
}
</style>
</head>

<body>
<p>段落中的一些文本。</

p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 7. 边框的更多应用

为了进一步丰富边框样式，可以结合其他CSS属性进行设计。例如：

边框半径 (border-radius) - 用于创建圆角边框。
边框阴影 (box-shadow) - 用于添加阴影效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS 边框更多应用示例</title>
<style>
div.rounded {
    border: 2px solid #4CAF50;
    border-radius: 15px; /* 创建圆角边框 */
    padding: 20px;
    width: 200px;
}
div.shadow {
    border: 1px solid #ccc;
    box-shadow: 10px 10px 5px #888888; /* 添加阴影效果 */
    padding: 20px;
    width: 200px;
}
</style>
</head>

<body>
<div class="rounded">圆角边框的文本内容。</div>
<div class="shadow">带阴影效果的文本内容。</div>
</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

# 8. CSS 边框属性

编辑此页

上次更新: 2025/01/25, 22:32:05

← CSS 盒子模型 CSS 轮廓样式设置→