css3线性渐变定义和使用linear-gradient()函数用于创建线性渐变“图像”。为了创建线性渐变，您需要设置渐变效果的起点和方向（指定为角度）。您还可以定义结束颜色。结束颜色是你想让Gecko平滑的过渡，你必须至少指定两种，当然你可以指定更多的颜色来创建更复杂的渐变效果。语法linear-gradient([|to,]?)用角度值指定渐变的方向（或角度）。角度顺时针增加。0度表示渐变方向是从下往上，90度表示渐变是从左到右。它的角度按顺时针方向增加。单位是度。关键字定义渐变的方向。有两个关键字，一个用于水平位置（左或右），一个用于垂直位置（顶部或底部）。关键字的顺序无关紧要，并且是可选的。由一个值和一个可选的结束位置（百分比值或沿渐变轴的）组成。CSS渐变的颜色渲染遵循与SVG相同的规则。颜色过渡点是一种插值提示，它定义相邻颜色之间的渐变如何进行。长度定义渐变颜色应在颜色过渡的中点停止在两种颜色之间的哪个点。如果省略，则颜色过渡的中点是两个色标之间的中点。基本线性渐变示例要创建最基本的渐变类型，您只需指定两种颜色。这些被称为色标。指定至少两个色标，可以指定任意数量。.container>div:nth-child(1){背景：线性渐变（红色，黄色）；效果渐变提示默认情况下，渐变从一种颜色平滑过渡到另一种颜色。您可以通过设置一个值将渐变的中心点移动到指定位置。在下面的示例中，我们将渐变的中心点设置为50%到10%。.container>div:nth-child(2){背景：线性渐变（红色，10%，黄色）；}Effect改变渐变的方向默认情况下，线性渐变的方向是从上到下，你可以指定一个值来改变渐变的方向。.container>div:nth-child(4){/**background:linear-gradient(side-or-corner,color-stop1,color-stop2,...);*side-or-corner-通过关键字的方式定义线性渐变的参考线方向*color-stop一个代表线性渐变的颜色和位置*/background:linear-gradient(toright,red,yellow);}Effect设置渐变角度如果你想更精确的控制渐变的方向，你可以为渐变设置一个特定的角度。.container>div:nth-child(4){/**background:linear-gradient(angle,color-stop1,color-stop2,...);*angle-表示线性渐变的基线的角度单位deg*color-stop1表示线性渐变的颜色和位置*/background:linear-gradient(0deg,red,yellow);}当效果使用角度时，0deg代表渐变方向从下到上，90deg代表渐变方向从左到右，这样的正角度属于顺时针方向。而负角度意味着逆时针方向。对角渐变您甚至可以将渐变的方向设置为从一条对角线到另一条对角线。.container>div:nth-child(5){背景：线性渐变（到右下角，红色，黄色）；}效果使用多种颜色您不必局限于两种颜色，您可以根据需要使用多种颜色！默认情况下，设置的颜色均匀分布在渐变路径中。.container>div:nth-child(7){背景：线性渐变（向右，红色，黄色，绿色）；}效果颜色结束位置你不需要让你设置的颜色在默认位置结束。您可以通过为每种颜色设置0、1%或2%或其他绝对值来调整它们的位置。如果你设置的位置是百分比，0%是起点，100%是终点，但是你可以根据需要设置这个范围之外的其他值来达到你想要的效果。如果你没有明确设置一些位置，那么它会自动计算，第一个颜色会停在0%，最后一个颜色会是100%，其他颜色会在相邻两个颜色的中间。停止。.multicolor-linear{background:linear-gradient(toleft,lime28px,red77%,cyan);}EffectsColorTransparencyGradients支持透明度，所以你可以使用透明度来实现一些漂亮的效果。.container>div:nth-child(8){background:linear-gradient(toright,rgba(255,0,0,0),rgba(255,0,0,1));}影响
