CSS3背景属性和CSS3的渐变

一：CSS3背景属性：

background-size:规定背景图片的尺寸。

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

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

content-box, padding-box,和 border-box区域内可以放置背景图像。
background-clip:规定背景的绘制区域。

  background-clip背景剪裁属性是从指定位置开始绘制。

二：CSS3 定义了两种类型的渐变（gradients）：

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

1.1语法：

background:
linear-gradient(方向,
颜色1, 颜色2);

例：background:linear-gradient(to
right,red,blue);

1.2语法：

background:
linear-gradient(角,
颜色1, 颜色2);

例：background:linear-gradient(0deg,red,blue);

 
  1.3使用透明度（Transparency）:

为了添加透明度，我们使用
rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，
它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。法

例：

background:
linear-gradient(to
right,
rgba(255,0,0,0),
rgba(255,0,0,1));

1.4重复的线性渐变：
repeating-linear-gradient()
函数用于重复线性渐变：

例：
background:
repeating-linear-gradient(red,
yellow
10%,
green
20%);
2.径向渐变（Radial
Gradients）- 由它们的中心定义：

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

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也
可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的
形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

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

例：
均匀分布：
background:
radial-gradient(red,
green,
blue);
不均匀分布background:
radial-gradient(red
5%,
green
15%,
blue
60%);

2.2设置形状：
shape
参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

例：
background:
radial-gradient(circle,
red,
yellow,
green);

2.3不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side

例：background:
radial-gradient(60%
55%,
closest-side,blue,green,yellow,black);

farthest-side

例：
background:
radial-gradient(60%
55%,
farthest-
side,blue,green,yellow,black);

closest-corner

例： background: radial-gradient(60%
55%, closest-corner,blue,green,yellow,black);

farthest-corner

例：  background: radial-gradient(60%
55%, farthest-corner,blue,green,yellow,black);

2.4重复的径向渐变：
repeating-radial-gradient()
函数用于重复径向渐变：

例：
background:
repeating-radial-gradient(red,
yellow
10%,
green
15%);