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%);