说明：CSS3完全向后兼容，因此不必改变现有的设计。浏览器通常支持CSS2
CSS3模块
CSS3被划分为模块：
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
CSS3 边框
通过CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框，并且不需要使用设计软件，比如PhotoShop。
在文章中，您将学到一下边框属性
- border-radius
- box-shadow
- border-image
浏览器支持：
| 属性 | 浏览器支持 | ||||
|---|---|---|---|---|---|
| border-radius | |||||
| box-shadow | |||||
| border-image | |||||
IE9+支持border-radius和box-shadow属性。
Firefox,Chrome以及Safari支持所有新的边框属性。
注释：对于border-image，Safari5 以及更老的版本需要前缀-webkit-.
Opera支持border-radius和box-shadow属性，但是对于border-image需要前缀-0-。
CSS3 圆角边框
/*圆角边框*/
div {
width:300px;
height:50px;
border:2px solid black;
border-radius:25px;
text-align:center;
}
CSS3边框阴影
在CSS3中，box-shadow用于向边框添加阴影：
div.shadowOne {
width: 200px;
height: 80px;
background-color: orange;
box-shadow: 10px 10px 5px #888888;
}
CSS3边框图片
通过CSS3的border-image属性，你可以使用图片来创建边框：
div.ImageOne {
border: 10px;
border-image: url(../Images/1.jpg) 30 30 round;
width: 200px;
height: 100px;
}