CSS应用：线性渐变

最新推荐文章于 2024-05-09 20:59:01 发布

tomato__

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量1.8w

点赞数 2

分类专栏： css应用文章标签： html5 css3 html css web设计

本文链接：https://blog.csdn.net/tomato__/article/details/51418094

版权

css应用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

渐变是从一种颜色逐渐蜕变到另一种颜色。线性渐变就是沿着一根轴线（水平、垂直或某个角度）改变颜色，从起点到终点颜色进行顺序渐变。

在这里，我将介绍在CSS中怎么实现线性渐变的方法。

线性渐变

创建线性渐变你需要指定渐变的轴线和延轴线变化的多种颜色，颜色将按与轴线垂直的方向被绘制，多种颜色间将实现渐变平滑过渡。具体语法如下：

linear-gradient( gradient_line, color1, color2, ... )

gradient_line指定了渐变线，后面跟随多种延轴线变化的颜色。

轴线

轴线可以省略，这时，它使用默认值“to bottom”，指定轴线可以使用两种方式：

使用角度

"0deg"表示垂直向上，然后按顺时针方向增加角度，"90deg"指向右边。

使用常量

常量	说明	角度值
to top	向上	0deg
to right	向右	90deg
to bottom	向下	180deg
to left	向左	270deg

常量可以组合使用，如"to top left"就是到左上角。

可以将轴线的绘制方式理解为：从元素的中心开始，延指定的角度向元素的两个方向扩展，轴线的结束点就是延指定角度前进与元素边框相交的点，而轴线的开始点就是延指定角度反方向前进与元素边框相交的点。下面我们通过一些实例加深对轴线的理解。

线性渐变的例子

下面是一些在背景上应用线性渐变的例子。

垂直渐变

background: linear-gradient(#cd6600, #0067cd);

你也可以指定轴线，下面的几种方式都可以达到和上面同样的效果，如下：

background: linear-gradient(to top, #cd6600, #0067cd);

background: linear-gradient(to bottom, #cd6600, #0067cd);

background: linear-gradient(180deg, #cd6600, #0067cd);

background: linear-gradient(to bottom, #cd6600 0%, #0067cd 100%);

斜角渐变

background: linear-gradient(135deg, #cd6600, #0067cd);

你也可以指定负角度，如下：

background: linear-gradient(-45deg, #cd6600, #0067cd);

多色渐变

background: linear-gradient(#6600cd, #cd6600 20%, #00cd66);

多色斜角渐变

background: linear-gradient(to top right, #cd6600, white, #0067cd);

重复线性渐变

重复线性渐变就是线性渐变的重复版本repeating-linear-gradient，当你定义好了你的线性渐变方式后，重复线性渐变会基于轴线不断的重复你的渐变方式，直到占满整个背景。

使用重复线性渐变的关键是你需要定义好颜色结点，需要注意的是你定义的最后一种颜色将和第一种颜色相接在一起，处理不当将导致颜色的急剧变化。

下面通过一些例子来说明重复线性渐变的使用方法。

重复线性渐变

background: repeating-linear-gradient(#cd6600, #0067cd 20px, #cd6600 40px);

重复线性渐变

background: repeating-linear-gradient(90deg, #cd6600, #0067cd 20px, #cd6600 40px);

重复线性渐变

background: repeating-linear-gradient(135deg, #cd6600, #0067cd 20px, #cd6600 40px);

颜色结点

颜色结点是沿着渐变轴线被放置的点，定义格式如下：

<color-stop> = <color> [ <percentage> | <length> ]

首先制定颜色（color），然后指定位置，使用百分比值或者长度值表示。百分比值对应轴线长度的百分比，0%表示起始点，而100%表示结束点；长度值指从轴线的起始点开始向结束点方向计算的数值。颜色结点通常放置在起始点和结束点之间，但不是必需的，轴线可以在两个方向上无限扩展，而颜色结点可以放置在线上的任何位置。

在每个颜色结点，线呈现为颜色结点的颜色。在两个颜色结点之间，线呈现的为从一种颜色过渡到另一种颜色过渡过程。在第一个颜色结点之前，线呈现为第一个颜色结点的颜色，而在最后一个结点之后，线呈现为最后一个颜色结点的颜色。

以下步骤定义了处理颜色结点列表的行为，应用这些规则后，所有的颜色结点都将有一个明确的位置：

如果第一个颜色结点没有指定位置，设置它的位置到0%；如果最后一个结点没有指定位置，设置其为100%；
如果一个颜色结点的位置小于了在它之前的任意一个颜色结点的位置，设置其位置等于它之前的所有颜色结点位置中最大的位置；
如果存在一些颜色结点没有指定位置，那么，为那些相邻的没有指定位置的颜色结点，设置它们的位置使它们平均占据空间。

如果多个颜色结点有相同的位置，它们产生一个从一种颜色到另一种颜色的急剧的转换。从效果来看，就是从一种颜色突然改变到另一种颜色。

为了理解上面的规则，下面是一些例子来帮助你的理解：

linear-gradient(red, white 20%, blue)
相当于
inear-gradient(red 0%, white 20%, blue 100%)

颜色结点例子
linear-gradient(red 40%, white, black, blue)
相当于
linear-gradient(red 40%, white 60%, black 80%, blue 100%)

颜色结点例子
linear-gradient(red -50%, white, blue)
相当于
linear-gradient(red -50%, white 25%, blue 100%)

颜色结点例子
linear-gradient(red -50px, white, blue)
相当于
linear-gradient(red -50px, white calc(-25px + 50%), blue 100%)

颜色结点例子
linear-gradient(red 20px, white 0px, blue 40px)
相当于
linear-gradient(red 20px, white 20px, blue 40px)

颜色结点例子
linear-gradient(red, white -50%, black 150%, blue)
相当于
linear-gradient(red 0%, white 0%, black 150%, blue 150%)

颜色结点例子
linear-gradient(red 80px, white 0px, black, blue 100px)
相当于
linear-gradient(red 80px, white 80px, black 90px, blue 100px)

颜色结点例子