共计 1896 个字符，预计需要花费 5 分钟才能阅读完成。
本节咱们来学习边框款式，次要包含如何设置边框的宽度、边框的色彩、边框的款式等。当咱们给某个元素设置边框时，能够分为上下左右四个边框，既能够同时设置四个边框的款式，也能够离开设置四个边框的款式。
对于边框款式的四个属性：
| 属性 | 形容 |
|---|---|
| border-width | 设置边框的宽度 |
| border-style | 设置边框的款式 |
| border-color | 设置边框的色彩 |
| border | 在一个申明中设置所有的边框属性 |
border-width
border-width 属性用于设置边框的宽度，也就是边框的粗细。
罕用属性值如下所示：
| 属性值 | 形容 |
|---|---|
| thin | 定义细的边框 |
| medium | 默认，定义中等的边框 |
| thick | 定义粗的边框 |
| length | 自定义边框的宽度，单位为像素 px |
| inherit | 规定应该从父元素继承边框宽度 |
咱们个别会应用 length 作为 border-width 属性的属性值，即设置边框的粗细为多少像素，例如 1px、2px、3px 等。border-width 属性能够同时为所有边框设置宽度，也能够独自地为每个边框设置宽度。
示例：
为上、右、下、左四个边框别离设置边框粗细：
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px; 依据简写属性 border-width，咱们也能够间接写成：
border-width:1px 2px 3px 4px;记住在简写时，为边框设置宽度的程序为 上、右、下、左，是顺时针程序。
而当元素的高低边框或左边框的宽度统一时，也能够应用简写，例如高低边框为 1px、左右边框为 2px，能够写成：
border-width:1px 2px;border-style
border-style 属性用于设置元素的边框款式。和 border-width 一样，能够同时为四个边框设置边框款式，也能够别离为每个边框独自设置边框款式。
border-style 的属性值有很多个，然而在理论网页制作中，罕用属性值有上面四种：
| 属性值 | 形容 |
|---|---|
| dotted | 定义点状边框 |
| dashed | 定义虚线边框 |
| solid | 定义实线边框 |
| none | 无边框 |
示例：
例如设置上、右、下、左的边框款式为实线、虚线、实线、虚线：
border-top-style:solid;
border-right-style:dashed;
border-bottom-style:solid;
border-left-style:dashed;能够简写成：
border-style: solid dashed solid dashed; 当元素的高低边框和左右边框款式统一时，也能够写成：
border-style: solid dashed; border-color
border-color 属性能够用于设置边框色彩。属性值能够是任何非法的色彩值，例如色彩名、十六进制色彩值、RGB 色彩值等。
border-color 属性同样能够同时设置四个边框的色彩，也能够独自设置四条边框的色彩。
示例：
例如设置上、右、下、左边框色彩为红黄蓝绿：
border-top-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-left-color:green;能够简写为：
border-color:red yellow blue green;border
下面咱们讲了 border-width、border-style、border-color 三个属性，然而其实咱们在理论利用中，个别不会独自来设置边框宽度或者色彩等，而是间接应用通过 border 简写属性来设置所有的边框属性。
border 属性能够间接设置所有边框的款式，如果要独自设置每个边框的款式则能够应用 border-top、border-right、border-bottom、border-left。
示例：
将上面这个 <div> 标签的边框设置成 3 像素、虚线、紫色：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS 学习 (9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div> 设置一个边框 </div>
</body>
</html>CSS 款式代码：
div{
width: 100px;
height: 100px;
border:3px dashed purple;
} 在浏览器中的演示成果：
链接：https://www.9xkd.com/