# CSS3 边框 ## CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。 在本章中,您将学到以下边框属性: * border-radius * box-shadow * border-image ## 浏览器支持 | 属性 | 浏览器支持 | | --- | --- | | border-radius | | box-shadow | | border-image | Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。 Firefox、Chrome 以及 Safari 支持所有新的边框属性。 注释:对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。 Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。 ## CSS3 圆角边框 在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。 在 CSS3 中,创建圆角是非常容易的。 在 CSS3 中,border-radius 属性用于创建圆角: 这个矩形有圆角哦! ### 实例 向 div 元素添加圆角: ``` div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ } ``` ## CSS3 边框阴影 在 CSS3 中,box-shadow 用于向方框添加阴影: ### 实例 向 div 元素添加方框阴影: ``` div { box-shadow: 10px 10px 5px #888888; } ``` ## CSS3 边框图片 通过 CSS3 的 border-image 属性,您可以使用图片来创建边框: border-image 属性允许您规定用于边框的图片! 用于创建上面的边框的原始图片: ![用于边框的图片](https://box.kancloud.cn/2015-12-13_566d21c9c6398.png) ### 实例 使用图片创建围绕 div 元素的边框: ``` div { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ } ``` ## 新的边框属性 | 属性 | 描述 | CSS | | --- | --- | --- | | [border-image](/cssref/pr_border-image.asp "CSS3 border-image 属性") | 设置所有 border-image-* 属性的简写属性。 | 3 | | [border-radius](/cssref/pr_border-radius.asp "CSS3 border-radius 属性") | 设置所有四个 border-*-radius 属性的简写属性。 | 3 | | [box-shadow](/cssref/pr_box-shadow.asp "CSS3 box-shadow 属性") | 向方框添加一个或多个阴影。 | 3 |