该属性的默认值是 stretch 拉伸图片填充区域。repeat 平铺、重复图片来填充区域。

　　round 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

　　注意：该属性用于规定如何延展和铺排边框图像的边缘和中间部分。因此，可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。

　　因为所有浏览器都不支持 border-image-source 属性，所以也无法单独使用 border-image-repeat 属性。

3、CSS3 背景

　　CSS3 增加了3个新的背景属性，他们提供了对背景更强大的控制。

　　IE9，Firefox，Chrome、Safari 和 Opera 都支持新的背景属性。

　　(1)、CSS3 background-size

　　background-size 属性指定背景图片的尺寸。

　　在 CSS3 以前，背景图片的大小是由图片的实际大小决定。而在 CSS3 中可以指定背景图片的大小，这就允许在不同的环境中重复使用背景图片。

　　可以使用像素或百分比指定图片尺寸。如果使用百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

　　语法：

background-size: length|%|cover|contain;

　　length 设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个会被设置为 "atuo"。

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

　　cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

　　contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

　　下面的代码，重置背景图片的大小：

1 body{ 2 background:url(images/css3.png) no-repeat; 3 background-size:78px 78px; 4 }

　　(2)、CSS3 background-origin

　　background-origin 属性指定了背景图像的位置区域。

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

　　background-origin 属性规定 background-position 属性相对于什么位置来定位，该属性的位置根据  background-position 属性值的不同，会显示在 top/right/bottom/left。

　　如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

　　background-attachment 属性是在 CSS1 中定义的属性，用于规定背景图像是否固定或者随着页面的其余部分滚动。默认值为 scroll 景图像会随着页面其余部分的滚动而移动。值为 fixed 时，当页面的其余部分滚动时，背景图片不会移动。

　　语法：

background-origin: padding-box|border-box|content-box;

　　background-origin 属性的默认值为 padding-box 背景图片相对于内边距框来定位。值为 border-box 时，背景图片相对于边框来定位。值为 content-box 时，背景图像相对于内容框来定位。

　　下图可以很好的展示他们的不同：

　　(3)、CSS3 background-clip

　　background-clip 属性指定背景绘制区域。

　　该属性和 background-origin 属性值相同，显示位置也差不多，但不依赖于 background-position 属性。该属性的默认值为 border-box 背景被剪切到边边框，当值为 padding-box 时，背景被剪切到内边距框。值为 content-box时，背景被剪切到内容框。

　　下图可以很好的展示他们的不同：

 

　　(4)、多个背景图片

　　CSS3 允许为一个元素添加多个背景图片：

1 body{ 2 background-image:url(images/1.png),url(images/2.png),url(images/3.gif); 3 }

 4、CSS3 渐变

　　CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

　　以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变，你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。

　　CSS3 定义了两种类型的渐变：

　　　　线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向。

　　　　径向渐变（Radial Gradients）- 由它们的中心定义。

　　IE10，Firefox，Chrome、Safari 和 Opera 都支持 CSS3 渐变，IE9 不支持。

　　(1)、线性渐变

　　创建一个线性渐变，必须至少定义两种颜色结点。颜色结点即想要呈现平稳过渡的颜色。同时，还可以设置一个起点和一个方向（或一个角度）。

　　语法：

background: linear-gradient(direction【方向】, color-stop1, color-stop2, ...);

　　①、线性渐变 - 从上到下

　　默认情况下，线性渐变都是从上到下，除非指定方向。

　　下面的例子，是从顶部开始的线性渐变，起点是红色，慢慢过渡到蓝色：

线性渐变-从上到下

　　在 Chrome 中显示如下：

　　②、线性渐变 - 从左到右

　　如需指定方向，从左到右只需要再增加一个用于方向的参数：to right

　　下面的例子，是从左边开始的线性渐变，起点是红色，慢慢过渡到蓝色：

1 #grad{ 2 background:linear-gradient(to right, red, blue); 3 }

　　在 Chrome 中显示如下：

　　③、线性渐变 - 对角

　　可以通过指定水平和垂直的起始位置来创建一个对角渐变。

　　下面的例子，从左上角开始到右下角的线性渐变，起点是红色，慢慢过渡到蓝色：

1 #grad{ 2 background:linear-gradient(to bottom right, red, blue); 3 }

　　在 Chrome 中显示如下：

　　④、使用角度

　　如需在渐变的方向上做更多的控制，可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right 等等）。

　　语法：

background: linear-gradient(angle【角度】, color-stop1, color-stop2);

　　角度是指水平线和渐变线之间的角度，逆时针方向计算。也就是说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

　　下面的例子，在线性渐变上使用角度：

线性渐变 - 使用角度0deg90deg180deg-90deg

　　在 Chrome 中显示如下：

　　⑤、使用多个颜色结点

　　下面的例子，带有多个颜色结点从上到下的线性渐变：

线性渐变 - 多颜色结点3 个颜色结点，均匀分布：7 个颜色结点，均匀分布：3 个颜色结点，不均匀分布：

　　在 Chrome 中显示如下：

　　下面的例子，是一个带有彩虹色和文本的线性渐变背景：

线性渐变 - 彩虹色渐变背景

　　在 Chrome 中显示如下：

 

　　⑥、使用透明度

　　CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

　　可以使用 rgba() 函数来定义颜色结点，以便于添加透明度。

　　rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

　　下面的例子，是从左到右的渐变，起点是完全透明的，慢慢过渡到完全部透明的红色：

线性渐变 - 使用透明度完全透明

　　中文：红色，英文：red，RGB：255 0 0，16进制：#FF0000，rgba() 函数指定红色半透明：rgba(255, 0, 0, 0.5);

　　在 Chrome 中显示如下：

 

　　⑦、重复的线性渐变

　　repeating-linear-gradient() 函数可用于重复线性渐变。

　　下面的例子，使用多个颜色结点创建从上到下重复的线性渐变：

线性渐变 - 重复

　　在 Chrome 中显示如下：

　　(2)、径向渐变

　　径向渐变由它的中心定义。

　　创建一个径向渐变，也必须至少定义两种颜色结点。

　　颜色结点即想要呈现平稳过渡的颜色。同时，还可以指定渐变的中心、形状（原型或椭圆形）、大小。

　　默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

　　语法：

background: radial-gradient(center, shape, size, start-color, ..., last-color);

　　①、径向渐变 - 颜色结点均匀分布

　　默认情况下，径向渐变的颜色均匀分布：

径向渐变 - 默认均匀

　　在 Chrome 中显示如下：