##3.1 CSS3边框简介
`border`属性在CSS1中就已经定义了,使用它可以设置元素的边框风格。
###3.1.1 边框的基本属性
CSS1和CSS2中的边框属性确实很简单,其主要包括三个类型值。
1. `border-width`:设置元素边框的粗细。
2. `border-color`:设置元素边框的颜色。
3. `border-style`:设置元素边框的类型。
在实际中可以将上面三个属性合并在一起,其缩写语法如下:
border: border-width border-style border-color;
缩写后的每个属性之间使用空格隔开,而且它们之间没有先后顺序,可这里三个值中唯一需要的值是“`border-style`”。
###3.1.2 边框的类型
| 属性值 | 功能描述 | 示例代码 |
|---|---|---|
| `none` | 定义无边框 | `.ele{border:none;}` |
|`hidden`| 与"`none`"相同,不过应用于表时除外,对于表,`hidden`用于解决边框冲突 | `.ele{border:hidden;}` |
| `dotted` | 定义点状边框 | `.ele{border: 3px dotted red;}` |
| `dashed` | 定义虚线边框 | `.ele{border: 3px dashed red;}` |
| `solid` | 定义实线边框 | `.ele{border: 3px solid red;}` |
| `double` | 定义双线。双线的宽度等于`border-width`的值 | `.ele{border: 3px double red;}` |
| `groove` | 定义3D凹槽边框,其效果取决于`border-color`的值 | `.ele{border: 3px groove red;}` |
| `ridge` | 定义3D垄状边框,其效果取决于`border-color`的值 | `.ele{border: 3px ridge red;}` |
| `inset` | 定义3D`inset`边框,其效果取决于`border-color`的值 | `.ele{border: 3px inset red;}` |
| `outset` | 定义3D`outset`边框,其效果取决于`border-color`的值 | `.ele{border: 3px outset red;}` |
| `inherit` | 规定应该从父元素继承边框样式。部分浏览器不支持这个属性值 | `.ele{border: 3px inherit red;}` |
#####chrome

#####360安全浏览器急速模式

#####360安全浏览器兼容模式

#####firefox

#####IE11

#####IE10

#####IE9

#####IE8

#####IE7

**上面IE78910均未使用原生IE测试,而是使用了IE11自带的IE78910进行的测试。 **