今天我们说说边框样式的内容。
在网页中，任何块元素和行内元素都可以设置边框属性。像div、img、table、span都可以设置边框属性的。
设置边框一般有三个方面，一是边框的宽度，二是边框的外观，三是边框的颜色。
语法：
border-width:像素值；border-style:属性值；border-color：颜色值；
| 边框的属性 | |
| 属性 | 说明 |
| border-width | 边框的宽度 |
| border-style | 边框的外观 |
| border-color | 边框的颜色 |
在对一个元素设置边框时，必须同时设定以上三个属性，边框才有效果出现。
border-width属性：
语法：
border-width:像素值；
border-style属性：
语法：
border-style:属性值；
| border-style属性值 | |
| 属性值 | 说明 |
| none | 无样式 |
| hidden | 与none相同，对于表，hidden用于解决边框冲突 |
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
| double | 双线 |
示例代码：
<html><head><title>border-style</title><style type="text/css">div{width:300px;height:50px;margin-bottom:20px;border-width:2px;border-color: black;}#d1 { border-style:none;}#d2 { border-style:hidden;}#d3 { border-style:solid;}#d4 { border-style:dashed;}#d5 { border-style:dotted;}#d6 { border-style:double;}</style></head><body><div id="d1">none</div><div id="d2">hidden</div><div id="d3">solid</div><div id="d4">dashed</div><div id="d5">dotted</div><div id="d6">double</div></body></html>
| border-style属性值（3D边框） | |
| 属性值 | 说明 |
| inset | 内凹 |
| outset | 外凸 |
| ridge | 脊线 |
| groove | 槽线 |
示例代码：
<html><head><title>3D边框</title><style type="text/css">div{width:300px;height:60px;margin-bottom:20px;border-width:20px;border-color:green;}#d1 { border-style:inset;}#d2 { border-style:outset;}#d3 { border-style:ridge;}#d4 { border-style:groove;}</style></head><body><div id="d1">inset</div><div id="d2">outset</div><div id="d3">ridge</div><div id="d4">groove</div></body></html>
需要使用3D边框时，边框的宽度需要大一些，才会有效果。
虽然以上属性值比较多，但是在实际开发中，也只有solid和dashed这两个属性用的多一些，其他基本不用。
border-color属性：
语法：
border-color：颜色值；
对于颜色，可以使用关键字颜色，也可以使用十六进制颜色。
简洁写法：
定义一个元素的边框必须同时设置三个属性：border-width，border-style和border-color。但是每个元素都写三遍，不仅麻烦，还容易出错。
css有一种简洁写法，可以减少代码量，并且非常好用。
语法：
border: 1px solid black;边框：宽度 外观 颜色；
原则上这种写法是没有顺序的，但是为了规范些，建议大家按照以上写法，进行简洁语法。
下节我们接着分享边框样式的内容。
1620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
