CSS3 了解

注意：使用Css3新特性要注意浏览器的兼容性，低版本的浏览器的兼容性不好或者说不支持这几种属性

边框：能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框----并且不需要使用软件来设计。

用到的属性：border-radius     box-shadow   border-image

注意：

1.Internet Explorer 9 支持 border-radius 和 box-shadow。

2.Firefox 支持所有新的边框属性。

3.Chrome 和 Safari 支持 border-radius 和 box-shadow，但是对 border-image 的支持需要前缀 -webkit-。

4.Opera 支持 border-radius 和 box-shadow，但是对 border-image 的支持需要前缀 -o-。

示例代码：

1.向div元素添加圆角边框

div{ width:30px;border:2px soild #a1a1a1; border-radius:20px; -moz-border-radius:20px;/*旧版本的火狐，兼容性的适配*/}

2.向div元素添加阴影

.div{width:300px;height:300px;background-color:#ff9900;box-shadow:10px 10px 5px #888888;--moz-box-shadow:10px 10px #888888;/*the old Firefox*/}

阴影是在元素的正下面，元素有多大阴影就有多大，所以10px 10px #888888 的含义分别是：相对元素阴影向右平移10px，向下平移10px，阴影向内腐蚀5px 阴影的颜色是#888888

3.使用图片创建围绕元素的边框(了解就好)

border-image：url(border.png) 30 30 round

背景：

background-size：10px 10px 设置背景图片的大小

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。