CSS3中新增的背景属性（如何设置多个背景图片）
-
- 新增背景属性
- background-clip
- background-origin
- background-size
- CSS常用背景属性
- background-repeat
- background-image
- 边框样式
- border-radius
- border-image
- 新增背景属性
新增背景属性：
background-clip
指定显示背景的范围
属性值：
border-box：边框以内的背景，包括边框（默认）
padding-box:padding以内的背景，包括padding
content-box:content以内的背景,包括content
background-origin:
开始显示的位置，一般是以图片为背景的时候使用
属性值：
border-box：从边框开始显示
padding-box:从padding开始显示
content-box: 从content开始显示
background-size:
设置背景图像的宽度和高度
属性值：
auto：保持原高度和宽度
length:后面可以跟两个数值，分别是宽度和高度，若只写一个数值，则高度自适应
percentage：后面可以跟两个数值，分别是宽度和高度（百分比），若只写一个数值，则高度自适应
cover：扩大至充满容器，一般适用于比容器小的图片
contain：缩小至充满容器，一般适用于比容器大的图片
background-position
属性设置背景图像的起始位置。
background-position:center;
CSS常用背景属性：
background-repeat：
图片重复
background-image：
一个元素可以设置一张或多张背景图片
写法：
background-image: url(“123.jpg”),url(“124.jpg”),url(“125.jpg”);
添加多张图片时可叠加，第一张在特别上面依次往下
边框样式：
border-radius
属性介绍：
①后面跟两个值的时候，第一个表示左上与右下的角度，第二个表示右上与左下的角度
②一个值的时候，是所有角的角度
③也可以分别设置左上左下右上右下的属性
例如左上的属性为：
border-top-left-radius
border-image
图像边框(类似于切割图片)
写法：
border-image: url("../image/123.jpg") 100;
border-image: url("../image/123.jpg") 100 100 100 100;
上边两行代码是等价的
第二行代码后面的四个数字分别上，右，下，左的边距
border-image: url("../image/123.jpg") 100/100px repeat repeat;
“/”后的三个参数分别是border的宽度，上和下图片填充的方式，左和右图片填充的方式。repeat平铺，stretch拉伸（默认样式），round也是平铺，不同的是如果最后一张图片没有都显示则不显示，而是把之前的图像扩大