CSS 边框语法
在 CSS 中，我们可以使用 border 属性来定义元素的边框样式。border 是一个复合属性，它是以下 3 个属性的简写。
语法：
border: width style color;说明：
width 是 border-width 的值（即边框宽度），style 是 border-style 的值（即边框外观），color 是 border-color 的值（即边框颜色）。
border-width 用于定义边框的宽度，它的取值是一个数值（如像素值、百分比等），或者关键字（如下表所示）。
| 取值 | 说明 |
|---|---|
| thin | 约 1px |
| medium | 约 3px |
| thick | 约 5px |
border-style 用于定义边框的外观，常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| none（默认值） | 无边框，不占空间（默认） |
| hidden | 无边框，不占空间（在表格边框合并中隐藏） |
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
| double | 双实线 |
| groove | 雕刻效果，与 ridge 相反 |
| ridge | 浮雕效果，与 groove 相反 |
| inset | 嵌入效果，与 outset 相反 |
| outset | 浮雕效果，与 inset 相反 |
border-color 属性的取值是一个颜色值，包括以下几种情况（常用的是前 4 种）。
- 关键字，比如 red、orange、skyblue 等。
- 十六进制值，比如 #F1F1F1。
- RGB 值，比如 rgb(255, 255, 255)。
- RGBA 值，比如 rgba(255, 255, 255, 1.0)。
- HSL 值，比如 hsl(60deg 75% 45%)。
- HSLA 值，比如 hsla(60deg 75% 45% / 60%)。
- HWB 值，比如 hwb(120deg 0% 50% / 75%)。
CSS 边框示例
接下来，我们通过几个简单的例子来讲解 CSS 是如何定义元素的边框样式的。
示例 1：CSS 边框的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
border: 2px dashed red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
border: 2px dashed red; 是一种简写形式。下面 2 种方式是等价的：
/* 简写形式 */
border: 2px dashed red;
/* 完整形式 */
border-width: 2px;
border-style: dashed;
border-color: red;示例 2：CSS 为图片添加边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
border: 2px dashed red;
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>页面效果如下图所示。
分析：
绝大多数元素都可以使用 border 属性来添加边框样式。
四个方向的边框
在 CSS 中，一个元素其实有 4 条边（上、下、左、右）。前面学习的是 4 条边的整体样式。如果想要对某一条边进行单独设置，此时应该怎么实现呢？
实际上，如果按照 4 条边的不同，border 属性可以拆分成 4 个子属性，如下表所示。
| 属性 | 说明 |
|---|---|
| border-top | 上边框 |
| border-bottom | 下边框 |
| border-left | 左边框 |
| border-right | 右边框 |
1. 上边框 border-top
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;简写形式为：
border-top: 1px solid red;2. 下边框 border-bottom
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;简写形式为：
border-bottom: 1px solid red;3. 左边框 border-left
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;简写形式为：
border-left: 1px solid red;4. 右边框 border-right
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;简写形式为：
border-right: 1px solid red;
对于边框样式，不管是整体样式，还是局部样式，我们都需要设置 3 个方面的内容：边框宽度、边框外观、边框颜色。
示例 3：CSS 分别定义 4 条边框样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
border-top: 4px solid red; /* 上边框样式 */
border-right: 4px solid green; /* 右边框样式 */
border-bottom: 4px solid blue; /* 下边框样式 */
border-left: 4px solid yellow; /* 左边框样式 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
示例 4：CSS 去除某一条边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
border: 2px solid red; /* 边框整体样式 */
border-bottom: none; /* 去除下边框 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
border-bottom: none; 表示去除下边框。想要去除下边框，下面 3 种方式都是可行的。
/* 方式 1（推荐） */
border-bottom: none;
/* 方式 2 */
border-bottom: 0px;
/* 方式 3 */
border-bottom: 0;