3.1 CSS3边框简介
border属性在CSS1中就已经定义了，使用它可以设置元素的边框风格，例如设置不同的边框颜色以及粗细。在详细介绍CSS3边框运用之前，先简单回顾边框属性。
3.1.1 边框的基本属性
CSS1和CSS2中的边框属性其实很简单，其主要包括三个类型值。
border-width：设置元素边框的粗细。
border-color：设置元素边框的颜色。
border-style：设置元素边框的类型。
在实际中可以将上面三个属性合并在一起，其缩写的语法：
border: border-width border-style border-color;
缩写后的每个属性之间使用空格隔开，而且它们之间没有先后顺序，可这里三个值中唯一需要的值是“border-style”，因此，要是这样写边框样式将会没有任何效果。
.elm {border:3px red}
此时浏览器将“border-style”解析成为“none”。要是这样设置，这个时候元素的边框是实线，粗线将是其默认值。
.elm{border:solid}
边框border-width的默认值是“medium”（大约等于3～4px）；border-color的默认色就是字体的颜色。
在Web实际制作之中，时常只为了方便使用，CSS中的border可以给不同的边设置不同的风格，其也遵守“TRBL”原则（Top/Right/Bottom/Left），例如单独写边框类型。
border-top-style:/*设置元素顶部边框类型*/
border-right-style:/*设置元素右边边框类型*/
border-bottom-style:/*设置元素底部边框类型*/
border-left-style:/*设置元素左边边框类型*/
上面是边框类型的扩展写法，同样的道理，border-color和border-width也可以像上面一样使用。除了上面的写法之外，还有一种简写形式。
border-style: solid;
/*一个值时，表示四条边都solid类型*/
border-style: solid dotted;
/*两个值时，第一个值表示元素上下边框类型，第二值表示左右边框类型*/
border-style:solid dotted dashed;
/*三个值时，第一个值表示元素顶边的类型，第二个值表示左右边框类型，第三个值表示底部边框类型*/
border-style: solid dotted dashed inset;
/*四个值时，第一个值表示元素顶边的类型，第二个值表示元素右边框类型，第三个值表示元素底边的类型，第四个值表示元素左边框类型*/
同样的原理，border-color和border-width具有一样的使用方法。如果只需要设置元素某部分具有边框效果，我们可以合成起来。
li {
border: 1px solid red;
border-width: 1px 0;
}
仅两行代码就表达出元素li顶部和底部都有一条1px的红色实线。这样方便维护代码，并且提升CSS性能。
3.1.2 边框的类型
CSS中使用border-style为元素border定义边框类型，常见的有实线“solid”、虚线“dashed”、点状线“dotted”等。下面一起看看CSS中border-style的几种类型效果，如
表3-1所示。
表3-1 border-style值列表
属性值 功能描述 示例代码 效果
none 定义无边框 .elm {border:none;} none
hidden 与“none”相同。不过应用于表时除外，对于表，hidden用于解决边框冲突 .elm{border:hidden;} hidden
dotted 定义点状边框 .elm{border:3px dotted red ;}
dashed 定义虚线边框 .elm{border:3px dashed red;}
solid 定义实线边框 .elm{border:3px solid red;}
double 定义双线。双线的宽度等于border-width的值 .elm{border:3px double red;}
groove 定义3D凹槽边框，其效果取决于border-color的值 .elm{border:3px groove red;}
ridge 定义3D垄状边框，其效果取决于border-color的值 .elm{border:3px ridge red;}
inset 定义3D inset边框，其效果取决于border-color的值 .elm{border:8px inset red;}
outset 定义3D outset边框，其效果取决于border-color的值 .elm{border:8px outset red;}
inherit 规定应该从父元素继承边框样式。部分浏览器不支持这个属性值
上面11个值在各浏览器下呈现的效果均有差异，其中最不可预测的边框样式是double。它定义为两条线的宽度加上这两条线之间的空间等于border-width值。而dotted、dashed、outset和inset在不同的浏览器下也无法保证一致，如图3-1所示。
图3-1 border-style各浏览器渲染效果
注
意 图3-1中IE 7和IE 8未使用原生IE 测试，而是使用了IE 9自带的IE 7、IE 8进行的测试。
3.1.3 谁在使用CSS3边框
CSS3增强的边框样式具有强大的生命力，灵活使用这些属性可以设计很多优美精巧的UI界面效果。这些属性谁在使用呢？
border-color受制于浏览器兼容性，至今在项目中使用该属性的项目几乎不存在。
border-image浏览器的支持度强一些，但运用在项目中仅存在一些前端爱好者的blog中。
border-radius得到浏览器的强大支持，在互联网上随处可见。
box-shadow，目前在Web页面上CSS3的盒子阴影特性应用非常广泛。
