CSS的渐变

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

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

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

CSS3 线性渐变

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

语法

        background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从左到右

        #inner { 
            height: 200px; 
            background-image: linear-gradient(to right, red , yellow); 
        }

点击尝试

使用角度

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

语法

        background-image: linear-gradient(angle, color-stop1, color-stop2)

但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

        #grad { background-image: linear-gradient(-90deg, red, yellow); }

点击尝试

带有指定的角度的线性渐变：

        background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] )

第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%，当x1,x2,y1,y2取值为极值的时候，x1和x2可以取值left（或0%）或right（或100%），,y1和y2可以取值top（或0%）或bottom（或100%）；

当x1等于x2，y1不等于y2，实现垂直渐变，调整y1，y2的值可以调整渐变半径大小；
当y1等于y2，x1不等于x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小；
当y1不等于y2，x1不等于x2，实现角度渐变，当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变；
当x1等于x2，y1等于y2，实现没有渐变，取from色，即“ from(颜色值) ”；

实现垂直渐变和水平渐变渐变时，x1和x2可以最简单的取值是left（或0%）或right（或100%）,y1和y2可以最简单的取值是top（或0%）或bottom（或100%）；
from(开始颜色值),to(结束颜色值)是两个渐变颜色值；
[color-stop(偏移量<小数>,停靠颜色值),...]：可以使用多个color-stop，如果渐变只有2个颜色，那么可以不使用该参数；偏移量必须为小数，如果偏移量>=1,那么该color-stop相当于无效；

        .grad{
            height: 200px;
            background: -webkit-gradient(linear, 40% 20%, 50% 60%, from(#FF0000), to(#FFFeee));
        }

点击尝试

重复的线性渐变

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

一个重复的线性渐变：

        .grad1 {
            height: 100px;
            background-image: repeating-linear-gradient(red, yellow 10%, green 20%); 
        }

点击尝试

CSS3 径向渐变

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

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

语法

        background-image: radial-gradient(shape size at position, start-color, ..., last-color);

径向渐变 - 颜色节点均匀分布（默认情况下）

颜色节点均匀分布的径向渐变：

        .inner{ 
            height: 200px;
            width: 200px;
            background-image: radial-gradient(red, yellow, green); 
        }

点击尝试

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

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

closest-side

farthest-side

closest-corner

farthest-corner

带有不同尺寸大小关键字的径向渐变：

        #grad1 { 
            height: 100px;
            width: 100px;
            background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); 
        } 
        #grad2 { 
            height: 100px;
            width: 100px;
            background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); 
        }

点击尝试