提到边框，大家首先想到的是CSS的boder属性。不错，border属性是CSS种盒模型基础属性之一。在CSS3中，关于边框的运用会有什么样的不同之处呢？又将如何使用？本章我们带着这些问题开始我们的CSS3边框之旅。
3.1 CSS3边框简介
border属性在CSS1中就已经定义了，使用它可以设置元素的边框风格。
3.1.1 边框的基本属性
CSS1和CSS2中的边框属性确实很简单，其主要包括三个类型值。
-
border-width：设置元素边框的粗细。 -
border-color：设置元素边框的颜色。 -
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 |
定义3Dinset边框，其效果取决于border-color的值 |
.ele{border: 3px inset red;} |
outset |
定义3Doutset边框，其效果取决于border-color的值 |
.ele{border: 3px outset red;} |
inherit |
规定应该从父元素继承边框样式。部分浏览器不支持这个属性值 | .ele{border: 3px inherit red;} |
chrome
chrome
360安全浏览器急速模式
360安全浏览器急速模式
360安全浏览器兼容模式
360安全浏览器兼容模式
firefox
firefox
IE11
IE11
IE10
IE10
IE9
IE9
IE8
IE8
IE7
IE7
上面IE78910均未使用原生IE测试，而是使用了IE11自带的IE78910进行的测试。
