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

成果