CSS border 语法
在 CSS 中，border 属性用于定义边框的宽度、样式和颜色。border 是一个复合属性，它是以下 3 个属性的简写。
语法：
border: width style color;说明：
width 是 border-width 的值，style 是 border-style 的值，color 是 border-color 的值。
注意: border-width 和 border-color 是可选的，如果不显式声明则使用其默认值。而 border-style 是必需的，如果未设置有效的样式，边框将不会显示（因为 border-style 默认值为 none）。
CSS border 摘要
| 属于 | CSS 边框 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | 各子属性的默认值 (medium none currentColor) |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS border 示例
接下来，我们通过几个简单的例子来讲解一下 CSS border 属性是如何使用的。
示例 1：border 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
border: 2px solid red;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
border: 2px solid red; 是以下代码的简写。
border-width: 2px;
border-style: solid;
border-color: red;示例 2：border 设置不同类型的边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
padding: 10px;
margin: 20px;
text-align: center;
}
.dotted {
border: 2px dotted red; /* 点状 */
}
.dashed {
border: 2px dashed green; /* 虚线 */
}
.double {
border: 10px double coral; /* 双实线 */
}
.groove {
border: 10px groove orange; /* 凹槽 */
}
.ridge {
border: 10px ridge teal; /* 凸脊 */
}
</style>
</head>
<body>
<div class="dotted">点状边框</div>
<div class="dashed">虚线边框</div>
<div class="double">双实线边框</div>
<div class="groove">凹槽边框</div>
<div class="ridge">凸脊边框</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们其实是为 border-style 这个子属性设置了不同的取值。
示例 3：设置单边边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 150px;
height: 80px;
padding: 10px;
margin: 20px;
text-align: center;
line-height: 80px;
}
.box1 {
border-bottom: 3px dashed blue; /* 只设置下边框 */
}
.box2 {
border-top: 2px solid red; /* 上边框 */
border-right: 4px dotted green; /* 右边框 */
border-left: 1px dashed purple; /* 左边框 */
/* 下边框未设置，默认为 none */
}
</style>
</head>
<body>
<div class="box1">只有下边框</div>
<div class="box2">不同边的边框</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们尝试使用 border-top、border-right、border-bottom、border-left 等属性来单独设置元素的某一条边框。
对于 .box1 来说，我们只给它设置了下边框为 3px 宽的蓝色虚线。对于 .box2 来说，我们分别设置了上、右、左三条边的边框。它们的宽度、样式和颜色都不同，而下边框由于没有设置（默认为 none），因此不显示。
