CSS3中新增的背景属性

CSS3中背景和边框的相关样式：包括背景相关的几个属性，如何在一个背景中使用多个、图像文件、如何绘制圆角边框、如何给元素添加图形边框：

1、新增的背景属性：

背景属性	属性功能
background-clip	指定背景的显示范围
background-origin	指定绘制背景图像时的起点
background-size	指定背景中图像的尺寸
background-break	指定内联元素的背景图像进行平铺时的循环方式

（1）background-clip指定背景的显示范围：

1）background-clip主要用来控制背景显示的区域；

2）使用方法：background-clip:border-box || padding-box || content-box

①border-box此值的为默认值，背景从border区域向外剪裁，也就是超出部分将被裁剪掉；

②padding-box：背景从padding区域向外剪裁，超过padding区域的背景将被剪裁掉；

③content-box：背景从content区域向外剪裁，超过content区域的背景将被剪裁掉；

3）浏览器的兼容情况：IE8版本以上、Firefox3.0版本以上、chrome2.0以上、Opera9.6版本以上、Safari4.0以上。background-clip在各种浏览器内核下，都具有自己的私有前缀：

①Firefox3.6版本以下(包含3.6版本)：-moz-background-clip:border || padding;

②Firefox4.0版本以上：支持border-box、padding-box、content-box并且不需要带上前缀，如果带上了"-moz"，那么在Firefox4.0+版本反而是一种错误的写法；

③background-clip兼容各浏览器的正确写法：

/*Firefox3.6以下版本*/ -moz-background-clip:border || padding;
/*Webkit*/ -webkit-background-clip:border-box || padding-box || content-box;
/*W3C标准 IE9版本以上或者Firefox4.0版本以上*/ background-clip:border-box || padding-box || content-box;

4）background-clip属性的应用：

①HTML代码：

<div>background-clip指定背景的显示范围</div>

②CSS代码：

div{
	width: 300px;
	height: 150px;
	border: 20px dashed red;
	padding: 20px;
	background-color: lightblue;
	background-clip: padding-box;
	/*background-clip: border-box;*/
	/*background-clip: content-box;*/
}

③效果图如下：

A、background-clip: padding-box;时的效果图：

B、background-clip: border-box;时的效果图：

C、background-clip: content-box;时的效果图：

（2）background-origin属性指定绘制背景图像的绘制起点：

1）在绘制背景图像时，默认是从内补白(padding)区域的左上角开始绘制，但是可以利用background-origin属性来指定绘制时从边框的左上角开始绘制，或者是从内容的左上角开始绘制；

2）使用方法：background-origin:border-box(border) || padding-box(padding) || content-box(content)

①padding-box(padding)：此值为background-origin的默认值，决定background-position起始位置从padding的外边缘(border的内边缘)开始显示背景图片；

②border-box(border)：此值决定background-position起始位置从border的外边缘开始显示背景图片；

③content-box(content)：此值决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片；

3）语法：background-origin在早期的Webkit个Gecko内核浏览器(Firefox3.6以下版本、Safari版本和chrome版本)支持一种老式的语法规则，类似于background-clip在Firefox3.6以下的版本一样：background-origin：padding || border || content;，那么在现代浏览器都支持一种新的语法：background-origin:padding-box || border-box || content-box;，为了兼容新老版本的浏览器，在使用background-origin改变background-position的原点位置时，最好新旧语法一起加上，并且新语法放在老语法后面，这样只要支持新语法规则的浏览器自动会识别background-origin的最新语法；

4）在IE8以下版本解析是不一样的，在IE7以下的版本background-origin默认是从border开始显示背景图片；

5）浏览器的兼容情况：IE9.0版本以上、Firefox3.0版本以上、chrome1.0版本以上、Opera9.6版本以上、Safari3.1版本以上background-origin虽然现代浏览器都支持，但在不同内核浏览器下还需要带上其各自的前缀，这样在实际应用中最好按下面的语法规则书写，以保证只要支持background-origin的都能正常运行，书写规范以及顺序如下：

/*Old Webkit and Gecko*/
-moz-background-origin:padding || border || content;
-webkit-background-origin:padding || border || content;
/*New Webkit and Gecko*/
-moz-background-origin:padding-box || border-box || content-box;
-webkit-background-origin:padding-box || border-box || content-box;
/*Presto Opera浏览器*/
-o-background-origin:padding-box || border-box || content-box;
/*W3C标准*/
background-origin:padding-box || border-box || content-box;

6）background-origin属性的应用：

①HTML代码：

<div>background-origin属性指定绘制背景图像的绘制起点</div>

②CSS代码：

div{
	width: 600px;
	height: 300px;
	background-image: url(../img/tour1.jpg);
	background-repeat: no-repeat;
	border: 20px dashed red;
	padding: 20px;
	background-origin: padding-box;
	/*background-origin: border-box;
	background-origin: content-box;*/
}

③效果图如下：

A、background-origin: padding-box;时的效果图：

B、background-origin: border-box;时的效果图：

C、background-origin: content-box;时的效果图：

（3）background-size属性指定背景图片的尺寸：

1）在CSS3中，可以使用background-size属性来指定背景图像的尺寸；

2）使用方法：background-size:auto || <length> || <percentage> || cover || contain;

①auto：此值为默认值，保持背景图片的原始高度和宽度；

②length：设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值则会被设置为auto；

③percentage：以父元素的百分比来设置背景图像的宽度和高度，第一个值设置为宽度，第二个值设置为高度。如果只设置一个值，则第二个值会被设置为auto；

④cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在当图片小于容器又无法使用background-repeat来实现时，我们就可以采用cover将背景图片放大到适合容器的大小，但这种方法会使得背景图片失帧；

⑤contain：此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在当图片大于元素容器时，而又需要将背景图片全部展示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使背景图片失帧；

3）浏览器的兼容情况：

background-size和其他的一些CSS3属性一样，需要加上自己的别名：
/*Mozilla*/
-moz-background-size:auto || <length> || <percentage> || cover || contain;
/*Webkit*/
-webkit-background-size:auto || <length> || <percentage> || cover || contain;
/*Presto*/
-o-background-size:auto || <length> || <percentage> || cover || contain;
/*W3C标准*/
background-size:auto || <length> || <percentage> || cover || contain;

4）background-size属性的应用：

①HTML代码：

<div>background-size属性指定背景图片的尺寸</div>

②CSS代码：

div{
	width: 500px;
	height: 300px;
	background-image: url(../img/tour1.jpg);
	background-repeat: no-repeat;
	border: 20px dashed red;
	padding: 20px;
	background-size: auto;
	/*background-size: 400px 200px;*/
	/*background-size: 600px;*//*保持原有的宽高比例*/
	/*background-size: 50% 50%;*/
	/*background-size: 70%;*//*保持原有的宽高比例*/
	/*background-size: cover;*/
}

③效果图如下：

A、background-size: auto;时的效果图：

B、background-size: length length;时的效果图：

C、background-size: length;时的效果图：

D、background-size: percentage percentage;时的效果图：

E、background-size: percentage;时的效果图：

F、background-size: cover;时的效果图：

G、background-size: contain;时的效果图： 

（4）background-break属性指定背景图像的尺寸：

1）CSS3中的标签元素能被分在不同区域(如：让内联元素span跨多行)，background-break属性能够控制背景在不同区域显示；

2）background-break属性的取值：

①background-break：continuous；此属性是默认值，忽视区域之间的间隔空隙(应用图片就像将不同的区域看作一个区域)

②background-break：bounding-box；此属性值是重新考虑区域之间的间隙；

③background-break：each-box；对每一个独立的标签区域进行背景的重新划分；

2、显示多个背景图片：

（1）在一个元素中可以显示多个背景图片，即在CSS3中一个元素可以显示多个背景图像，还可以将多个背景图片进行重叠显示，这样可以让我们对背景中所用素材的调整变得更加容易；

（2）使用方法：background-image:url(1.png),url(2.png),url(3.png);

（3）图层的排序方法：浏览器中显示时叠放的顺序从上往下指定的，第一图像文件放在最上面，最后指定的文件是放在最下面的；

3、使用图像边框：

（1）在CSS3中增加了一个border-image属性，可以让元素的长度或宽度处于随时变化时，变化状态的边框统一使用一个图像文件来进行绘制；

（2）border-image属性最简单的使用方法：

1）-webkit-border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距;

2）-moz-border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距; 

3）-o-border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距; 

4）border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距; 

其中的参数：图像的路径、上边距、右边距、下边距、左边距必须进行指定，但是如果上边距、右边距、下边距、左边距的值完全一样，那么可以缩写为一个，写法：border-image:url("边框图像路径") 边距;

5）当我们指定了边距以后，浏览器会对这个背景图像进行切割，如下图：

会将图像分割成九个部分，如下图：

在浏览器中显示的时候，border-top-left-image、border-top-right-image、border-bottom-left-image、border-bottom-right-image不会进行任何的拉伸。而border-top-image、border-right-image、border-bottom-image、border-left-image会分别作为上边框、右边框、下边框、左边框的这个背景图像来进行显示，必要的时候还可以将这四个图像进行平铺或者伸缩；

（3）border-image属性指定边框的宽度：

1）在CSS3中除了可以使用border属性和border-width属性来指定宽度，我们还可以使用border-image属性来指定边框的宽度；

2）指定方法：border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距 / border宽度;

3）另外border的宽度也可以对四条边进行分别设置:
设置的方法：border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距 / border上宽度 border右宽度 border下宽度 border左宽度;

（4）指定四条边的背景的显示方法：

1）在CSS3中可以在border-image属性中指定元素四条边中的图像，是以拉伸的方式显示还是平铺的方式显示；

2）指定方法：border-image:url("") 上边距 右边距 下边距 左边距 / border宽度 topbottom leftright;

3）topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边中的显示方式，在显示方式中可以指定的值有repeat、stretch、round：

①repeat：将图像以平铺的方式显示；

②stretch：将图像以拉伸的方式显示；

③round：将图像进行平铺显示，但是如果最后一幅图不能被完全显示时，就不显示图像，则把之前的图像扩大；