css3线性渐变

css3线性渐变

定义与用法

linear-gradient() 函数用于创建一个线性渐变的 “图像”。

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

语法

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> ) 

<angle>

用角度值指定渐变的方向（或角度）。角度顺时针增加。 0度表示渐变方向从下向上，90度表示渐变从左向右。其角度按照顺时针方向增加。单位为deg。

<side-or-corner>
通过关键字定义渐变的方向。具有两个关键字，一个表示水平位置( left或right)，一个表示垂直位置( top或bottom)。关键字的先后顺序无影响，井且都是可选的。

<linear-color-stop>

由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<lenght>）。CSS渐变的颜色渲染采取了与SVG相同的规则。

<color-hint>

颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。

实例

基础线性渐变

要创建最基本的渐变类型，您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标，也可以指定任意数量。

 .container>div:nth-child(1){
            background: linear-gradient(red , yellow);
        }

效果

渐变提示

默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。 在如下示例中, 我们将渐变的中心点由50%设为10%。

.container>div:nth-child(2){
            background: linear-gradient( red , 10%,yellow);
        }

效果

改变渐变方向

默认情况下，线性渐变的方向是从上到下， 你可以指定一个值来改变渐变的方向。

.container>div:nth-child(4){
            /*
                * background: linear-gradient(side-or-corner, color-stop1, color-stop2, ...);
                * side-or-corner -通过关键字方式定义线性渐变的基准线的方向
                *color-stop 一表示线性渐变的颜色以及位置
            */
            background: linear-gradient(to right, red, yellow);
        }

效果

设置渐变角度

如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。

.container>div:nth-child(4){
            /*
                * background: linear-gradient(angle, color-stop1, color-stop2, ...);
                * angle -表示线性渐殳的基准线的角度 单位为deg
                *color-stop 一表示线性渐变的颜色以及位置
            */
            background: linear-gradient(0deg, red , yellow);
        }

效果

在使用角度的时候, 0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。

对角线渐变

你甚至可以设置渐变方向为从一个对角到另一个对角。

.container>div:nth-child(5){
            background: linear-gradient(to bottom right, red, yellow);
        }

效果

使用多种颜色

无需局限于使用两种颜色，你想使用多少种颜色都可以！ 默认情况下，所设置颜色会均匀分布在渐变路径中。

.container>div:nth-child(7){
            background: linear-gradient(to right, red,yellow,green);
        }

效果

颜色终止位置

你不需要让你设置的颜色在默认位置终止。 你可以通过给每个颜色设置0，1%或者2%或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， 0% 表示起始点, 而100%表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在0%处停止，而最后一种颜色是100%，至于其他颜色则是在它邻近的两种颜色的中间停止。

.multicolor-linear { 
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

效果

颜色透明度

渐变支持透明度，所以你可以使用透明度来实现一些漂亮的效果。

.container>div:nth-child(8){
            background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
        }

效果