上查看所有课程
CSS border-style 属性指定元素边框的外观。例如，
h1 {
border-style: solid;
}浏览器输出
在此，border-style 属性的 solid 值将 h1 元素的边框样式设置为实线。
CSS border-style 语法
border-style 属性的语法如下，
border-style: value;这里，value 可以具有以下可能值
solid：创建一个单实线边框dotted：创建一个由点组成的边框dashed：创建一个由短划线组成的边框double：创建由两条平行线组成的边框groove：创建具有雕刻 3D 效果的边框ridge：创建具有凸起 3D 效果的边框inset：创建具有内凹 3D 效果的边框outset：创建具有外凸 3D 效果的边框none：不显示边框hidden：边框被隐藏
示例 1：CSS border-style 属性
让我们看一个 border-style 属性的示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-style</title>
</head>
<body>
<p class="solid">border-style: solid;</p>
<p class="dotted">border-style: dotted;</p>
<p class="dashed">border-style: dashed;</p>
<p class="none">border-style: none;</p>
<p class="hidden">border-style: hidden;</p>
</body>
</html>/* create a solid border */
p.solid {
border-style: solid;
}
/* create a dotted border */
p.dotted {
border-style: dotted;
}
/* create a dashed border */
p.dashed {
border-style: dashed;
}
/* no border is created */
p.none {
border-style: none;
}
/* hide the border */
p.hidden {
border-style: hidden;
}
/* add 12px padding to all p */
p {
padding: 12px;
}浏览器输出
上面的示例说明了 border-style 属性的不同值的用法。
注意：border-style 属性的 none 和 hidden 值之间存在差异，尽管它们显示相同的视觉效果。none 值会移除边框和边框空间，而 hidden 值仅隐藏边框但保留边框空间。
示例 2：CSS border-style 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-style</title>
</head>
<body>
<p class="double">border-style: double;</p>
<p class="groove">border-style: groove;</p>
<p class="ridge">border-style: ridge;</p>
<p class="inset">border-style: inset;</p>
<p class="outset">border-style: outset;</p>
</body>
</html>/* create a border with two parallel lines */
p.double {
border-style: double;
}
/* create a border with 3D groove effect */
p.groove {
border-style: groove;
}
/* create a border with 3D ridge effect */
p.ridge {
border-style: ridge;
}
/* create a border with 3D inset effect */
p.inset {
border-style: inset;
}
/* create a border with 3D outside effect */
p.outset {
border-style: outset;
}
p {
padding: 12px;
}浏览器输出
CSS border-style 属性作为简写属性
我们可以使用 border-style 属性来设置边框的一到四个边的样式。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-style</title>
</head>
<body>
<p class="one-value">border-style: solid;</p>
<p class="two-value">border-style: solid dashed;</p>
<p class="three-value">border-style: solid dashed dotted</p>
<p class="four-value">border-style: solid dashed dotted groove</p>
</body>
</html>p {
padding: 12px 18px;
}
/* set all side styles to solid */
p.one-value {
border-style: solid;
}
/* set top/bottom to solid, left/right to dashed */
p.two-value {
border-style: solid dashed;
}
/* set top to solid, left/right to dashed, bottom to dotted */
p.three-value {
border-style: solid dashed dotted;
}
/* set top to solid, right to dashed, bottom to dotted, left to groove */
p.four-value {
border-style: solid dashed dotted groove;
}浏览器输出
border-style 属性可以有一个到四个值，如下所示，
- 一个值：应用于所有边
- 两个值：第一个值应用于顶部和底部边，第二个值应用于左侧和右侧边
- 三个值：第一个值应用于顶部边，第二个值应用于左侧和右侧边，第三个值应用于底部边
- 四个值：第一个值应用于顶部，第二个值应用于右侧，第三个值应用于底部，第四个值应用于左侧边
CSS border-style 组成属性
CSS border-top-style 属性
border-top-style 属性仅为元素的顶部边框添加样式。例如，
p {
border-top-style: solid;
}浏览器输出
CSS border-right-style 属性
border-right-style 属性仅为元素的右边框添加样式。例如，
p {
border-right-style: solid;
}浏览器输出
CSS border-bottom-style 属性
border-bottom-style 属性仅为元素的底部边框添加样式。例如，
p {
border-bottom-style: solid;
}浏览器输出
CSS border-left-style 属性
border-left-style 属性仅为元素的左边框添加样式。例如，
p {
border-left-style: solid;
}浏览器输出
