????渐变背景 详解 ！

W3C 与 2010年11月份 正式支持渐变背景样式，背景图像源可以定义为渐变背景
渐变背景包括 线性渐变和 径向渐变俩种类型

1.线性渐变

创建一个线性渐变 只需要两个颜色 ，也可以选择设置一个起点或一个方向，用法：

linear-gradient (angle , color-stop1 , color-stop2 , …)

angle : 渐变方向 取值为角度或者关键字。关键字包括一下4个：

关键字	作用
to left：	设置渐变从右到左，相当于270deg。
to right：	设置渐变从左到右，相当于90deg。
to top：	设置渐变从下到上，相当于0deg。
to bottom：	设置渐变从上到下，相当于180deg。该值为默认值。

DEG PS：在CSS中角度单位有：度(deg)、梯度(grad)\弧度(rad)。无论如何声明，这些值都会解释为0~360范围内的度数。如：-90deg=270deg。

例：如果创建对角渐变线，可以使用to top left（从右下到左上）、

color-stop：指定渐变的色点

实例设计：

本例使用 linear-gradient （）函数为页面设计渐变网页背景演示如下：

代码如下：

1.重复线性渐变

知识点：使用 repearing-linear-gradient（）函数可以定义 重复线性，用法与 linaer-gradient（）函数相同。

注意：使用重复线性渐变的关键是要定义好色点，让最后一个颜色和第一个颜色能够很好的连接起来，处理不当将导致颜色的急剧变化。

实例设计：

代码如下：

????径向 渐变

创建一个径向渐变，至少定义两个颜色，同时可以指定渐变的中心点位置、形状类型（圆形或椭圆形）

radial-gradient（）用法如下：

shape：用来指定渐变的类型，包括circle（圆形）和 ellipse（椭圆形）两种。

size： 如果类型为 circle 指定一个值设置⚪圆形的半径；如果类型为 ellipse 指定两个值分别设置椭圆的x和

y轴半径。取值包括长度值，百分比，关键字说明如下：

☁closet -side： 指定径向渐变的半径长度为从中心点到最近的边。
☁closet -corner： 指定径向渐变的半径长度为从中心点到最近的角。

⚡farthest -side： 指定径向渐变的半径长度为从中心点到最远的角。
⚡farthest-corner： 指定径向渐变的半径长度为从中心点到最远的角。

????position：用来指定中心点，如果提供两个参数，第一个表示x，第二个表示y，
如果提供一个参数，第二个值默认 50%， 即最终会被转换为具体的长度。

实例设计：

本例使用 CSS3 径向渐变制作圆形球体，主要利用多重背景进行设计，然后使用径向渐变叠加设计球体和发光的光晕效果。

重复 径向 渐变

知识点：使用 repeating-radial-gradient() 函数

可以定义重复线性渐变，用法同上。

实例设计：

下面实例设计三色重复显示径向渐变，效果如下：

温馨提示：不要久盯此图

代码如下：

完结！！！

作者：在校生记录博客
出处：这里。。。。
只供学习交流！