第3章 CSS3边框-1

提到边框，大家首先想到的是CSS的boder属性。不错，border属性是CSS种盒模型基础属性之一。在CSS3中，关于边框的运用会有什么样的不同之处呢？又将如何使用？本章我们带着这些问题开始我们的CSS3边框之旅。

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	定义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进行的测试。