认识border属性
我们可以通过boder属性来为元素设置边框；元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。值得注意的一点是：为元素设置边框时必须指定三个样式(边框的样式，宽度，颜色)，三者缺一不可。
每个边框有 3 个方面：宽度、样式，以及颜色。下面内容将会具体讲解这三个方面
一、边框的宽度border-width：
设置边框宽度有两种方法，第一种是值复制法按照 top-right-bottom-left 的顺序设置元素的各边边框，第二种 也可以通过单独属性分别设置边框各边的宽度，
（一）值复制（简写样式）
指定四个值，分别设置给上，右，下，左。顺时针方向；
div{border-style:soild;border-width:10px 20px 30px 40px}
指定三个值，第一个值10px设置给上边框，第二个值设置给左边框和右边框，第三个值设置给下边框；
div{border-style:soild;border-width:10px 20px 30px}
指定两个值，第一个值设置给上下边框，第二个值设置给左右边框；
div{border-style:soild;border-width:10px 20px}
指定一个值，四个边框使用同一个值
div{border-style:soild;border-width:10px}
（二）单独属性设置边框宽度
- border-top-width 顶部边框宽度
- border-left-width 左面边框宽度
- border-right-width 右面边框宽度
- border-bottom-width 底面边框宽度
二、边框的颜色 border-color
border-color 属性，它一次可以接受最多 4 个颜色值。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
（一）值复制 如果颜色值小于 4 个，值复制就会起作用，与边框宽度border-width属性顺序一致。
例如： p {border-style: solid;border-color: blue green;} 就是上下边框为蓝色，左右为绿色
表达的效果
（二）单独属性设置边框颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：
- border-top-color 顶部边框颜色
- border-right-color 右面边框颜色
- border-bottom-color 底面边框颜色
- border-left-color 左面边框颜色
（三）透明边框
如果我们希望创建一个不可见的边框，即透明边框。边框颜色值 transparent。这个值用于创建有宽度的不可见边框。
利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）
注意：transparent值，在IE7之前的版本是无法使用的，在以前的版本中浏览器或根据 color值 来设置边框的颜色
三、边框的样式border-style
样式是边框最重要的一个方面，样式控制着边框的显示，同时要注意如果没有样式，将根本没有边框。
CSS 的 border-style 属性定义了 10 个不同的非 inherit （非继承）样式，包括 none。我们最常使用的四种边框样式分别是：solid实线；dotted点状实线；dashed虚线；double双实线。同样边框样式与边框宽度属性相似有两种设置方式：
（一）简写样式(其顺序与边框宽度顺序相同， top-right-bottom-left 的顺序)
可为一个边框定义四种样式,例如：
div{border-style：solid dotted dashed double}
表现效果
（二）单独属性设置边框样式
- border-top-style 顶部边框样式
- border-right-style 右边边框样式
- border-bottom-style 底部边框样式
- border-left-style 左边边框样式
注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。
div{border-style: solid solid solid none;}可以写成： div{border-style: solid; border-left-style: none;}
表现效果
（三）border-style:none
none是默认值
如果边框样式为 none，即边框根本不存在，那么无论边框多大的值都不可能有宽度。
因为边框宽度自动设置为0了，而不论原先定义的是什么。
p {border-style: none; border-width: 50px;}
四、默认值
border-style的默认值为：none（无） 所以表格样式的属性一定不能缺少，如果缺少则border-width和border-color属性都不可使用。
border-width的默认值为：3px 希望边框宽度出现就一定要设置边框样式。
border-color的默认值为：black 黑色。默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。
