CSS 边框各边 详解
css3基础 2022-05-23 12:02:15小码哥的IT人生shichen
CSS 边框各边
CSS 边框 - 单独的边
从上一章的例子中，您已经看到可以为每一侧指定不同的边框。
在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：
示例代码：
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
结果：
不同的边框样式
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<h1>单独的边框</h1>
<p>两种不同的边框样式。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
不同的边框样式
上例的结果与此相同：
示例代码：
p {
border-style: dotted solid;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<h1>单独的边框</h1>
<p>两种不同的边框样式。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
它的工作原理是这样的：
如果 border-style 属性设置四个值：
border-style: dotted solid double dashed;
- 上边框是虚线
- 右边框是实线
- 下边框是双线
- 左边框是虚线
如果 border-style 属性设置三个值：
border-style: dotted solid double;
- 上边框是虚线
- 右和左边框是实线
- 下边框是双线
如果 border-style 属性设置两个值：
border-style: dotted solid;
- 上和下边框是虚线
- 右和左边框是实线
如果 border-style 属性设置一个值：
border-style: dotted;
- 四条边均为虚线
示例代码：
/* 四个值 */
p {
border-style: dotted solid double dashed;
}
/* 三个值 */
p {
border-style: dotted solid double;
}
/* 两个值 */
p {
border-style: dotted solid;
}
/* 一个值 */
p {
border-style: dotted;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* 四个值 */
p.four {
border-style: dotted solid double dashed;
}
/* 三个值 */
p.three {
border-style: dotted solid double;
}
/* 两个值 */
p.two {
border-style: dotted solid;
}
/* 一个值 */
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<h1>单独的边框</h1>
<p class="four">四种不同的边框样式。</p>
<p class="three">三种不同的边框样式。</p>
<p class="two">两种不同的边框样式。</p>
<p class="one">一种边框样式。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
上例中使用的是 border-style 属性。但 border-width 和 border-color 也同样适用。
