介绍CSS渐变色函数的用法。
建议使用较新的Chrome浏览器阅读此页面。
参数：linear-gradient([<方向>,]<颜色节点1>,<颜色节点2>[,…])
改变渐变的方向。
<方向>参数中的允许值如下：
to left：从右向左to right：从左向右to top：从下到上to bottom：从上到下（不使用时的默认效果）to top left：从右下到左上to top right：从左下到右上to bottom left：从右上到左下to bottom right：从左上到右下deg或rad为单位0deg或大于360deg的角度linear-gradient(#FF7777,#77FF77,#7777FF)
linear-gradient(to top,#FF7777,#77FF77,#7777FF)
linear-gradient(to top right,#FF7777,#77FF77,#7777FF)
linear-gradient(0deg,#FF7777,#77FF77,#7777FF)
linear-gradient(45deg,#FF7777,#77FF77,#7777FF)
linear-gradient(1rad,#FF7777,#77FF77,#7777FF)
改变渐变中颜色的种类与分布。
一般每一个<颜色节点>的参数如下：
<颜色>[ <位置>]其中：
<颜色>：一般使用预定义颜色名称、十六进制颜色或RGBA颜色代码（rgba()）表示颜色[1]<位置>：指定颜色节点中心位置
%或px为单位的长度[2]
%的参考长度为背景块对角线在渐变方向上的投影0%或大于100%的长度linear-gradient(to right,#FF7777,#77FF77 30%,#7777FF)
linear-gradient(to right,#FF7777 50%,#77FF77 75%,#7777FF)
linear-gradient(to right,#FF7777 33.3%,#77FF77 33.3%,#77FF77 66.7%,#7777FF 66.7%)
linear-gradient(to right,#FF7777,#FFFF77 15%,#77FF77 20%,#77FFFF,#7777FF)
linear-gradient(to right,#FF7777 25px,#77FF77 75px,#7777FF 100px)
linear-gradient(to right,#FF7777 25%,#77FF77 100px,#7777FF 100%)
<位置>参数亦可在两个颜色节点之间的一个颜色节点单独使用，用于改变两个颜色节点中间颜色的位置。
linear-gradient(to right,#FF7777,20%,#7777FF)
linear-gradient(to right,#FF7777,80%,#7777FF)
参数：radial-gradient([[形状] [尺寸] [at <位置>],]<颜色节点1>,<颜色节点2>[,…])
[形状]参数的允许值如下：
circle：圆形ellipse：椭圆形[尺寸]参数的允许值如下：
closest-side：从圆心到最近的边closest-corner：从圆心到最近的角farthest-side：从圆心到最远的边farthest-corner：从圆心到最远的角（不使用时的默认效果）%为单位的长度%的参考长度分别为背景块的宽度和高度形状和尺寸可以只使用一个。
radial-gradient(at 75px 25px,#FF7777,#77FF77,#7777FF)
radial-gradient(circle at 75px 25px,#FF7777,#77FF77,#7777FF)
radial-gradient(ellipse at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)
radial-gradient(circle closest-side at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)
radial-gradient(circle closest-corner at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)
radial-gradient(ellipse closest-side at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)
radial-gradient(circle 100px at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)
radial-gradient(75px 100px at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)
radial-gradient(closest-corner at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)
radial-gradient(75px at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)
radial-gradient(75px 50% at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)
radial-gradient(50% 50% at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)
决定圆心的位置，分为横纵坐标。
横坐标可选值：
left：左边center：中间（不使用时的默认效果）right：右边%的参考长度为背景块的宽度0%或大于100%的长度纵坐标可选值：
top：顶部center：中间（不使用时的默认效果）bottom：底部%的参考长度为背景块的高度0%或大于100%的长度radial-gradient(25px,#FF7777,#77FF77,#7777FF)
radial-gradient(25px at left bottom,#FF7777,#77FF77,#7777FF)
radial-gradient(25px at center 10px,#FF7777,#77FF77,#7777FF)
radial-gradient(25px at 70% 25px,#FF7777,#77FF77,#7777FF)
radial-gradient(25px at -5px 60px,#FF7777,#77FF77,#7777FF)
radial-gradient(25px at -5% 105%,#FF7777,#77FF77,#7777FF)
方向为从内向外，其余与线性渐变的<颜色节点>相同，不再赘述。
参数：conic-gradient([at <位置>,]<颜色节点1>,<颜色节点2>[,…])
决定中心位置，参数同径向渐变的位置。
conic-gradient(#FF7777,#77FF77,#7777FF)
conic-gradient(at 10px 10px,#FF7777,#77FF77,#7777FF)
conic-gradient(at left top,#FF7777,#77FF77,#7777FF)
改变渐变中颜色的分布。
每一个<颜色节点>的参数如下：
<颜色>[ <位置>]其中：
<颜色>：一般使用预定义颜色名称、十六进制颜色或RGBA颜色代码（rgba()）表示颜色[1]<位置>：指定颜色中心位置
%、deg或rad为单位的角度
%的参考角度为360degconic-gradient(#FF7777,#77FF77,#7777FF)
conic-gradient(#FF7777 10deg,#77FF77 20deg,#7777FF 2rad)
conic-gradient(#FF7777 10%,#77FF77 45deg,#7777FF 70%)
conic-gradient(#FF7777,90deg,#7777FF)
repeating-linear-gradient()：重复线性渐变repeating-radial-gradient()：重复径向渐变repeating-conic-gradient()：重复锥形渐变能创建重复的渐变，参数与其对应的单渐变分别相同。
使用该方式创建渐变时，下一组渐变的起始位置为上一组渐变最后一个颜色节点的位置，因此最好指定最后一个颜色节点的位置。
repeating-linear-gradient(#FF7777 10%,#77FF77 20%,#7777FF 30%)
repeating-radial-gradient(circle 50px,#FF7777 10%,#77FF77 20%,#7777FF 30%)
repeating-conic-gradient(#FF7777 10deg,#77FF77 20deg,#7777FF 30deg)
background属性可以叠加多层，写在最前的置于最顶层，写在最后的置于最底层。
利用transparent或rgba()函数可以创建透明或半透明区域，用于设计复杂的图案。
radial-gradient(25px at 50px 50px,#FF7777,#77FF77,#7777FF,transparent), linear-gradient(#FF7777,#77FF77,#7777FF)
linear-gradient(to top,transparent 42.5%,#D0142C 42.5%,#D0142C 57.5%,transparent 57.5%), linear-gradient(to left,transparent 45%,#D0142C 45%,#D0142C 55%,transparent 55%), linear-gradient(to top,transparent 37.5%,#FFFFFF 37.5%,#FFFFFF 62.5%,transparent 62.5%), linear-gradient(to left,transparent 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,transparent 57.5%), linear-gradient(to top right,transparent 45%,#D0142C 45%,#D0142C 55%,transparent 55%), linear-gradient(to top left,transparent 45%,#D0142C 45%,#D0142C 55%,transparent 55%), linear-gradient(to top left,transparent 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,transparent 57.5%), linear-gradient(to top right,#00237D 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,#00237D 57.5%)
| 分层 | ||||||||
|---|---|---|---|---|---|---|---|---|
|
|
linear-gradient(to bottom,#000000 15%,transparent 15%,transparent 81%,#000000 81%), linear-gradient(70deg,#000000 35%,transparent 35%), linear-gradient(110deg,transparent 65%,#000000 65%), linear-gradient(70deg,#FFFFFF 42%,transparent 42%), linear-gradient(110deg,transparent 58%,#FFFFFF 58%), linear-gradient(to bottom,#000000 25%,transparent 25%), linear-gradient(85.5deg,#000000 48%,transparent 48%), linear-gradient(94.5deg,transparent 52%,#000000 52%), #FEC600
| —— Ｖ Ｃ 编 辑 团 队 —— |
| 分层 | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
|
上述例子中可以看到斜向的颜色分界有明显锯齿纹路。
如：
linear-gradient(to top right,#00237D 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,#00237D 57.5%)
我们可以在分界之间留下1px的空间达到抗锯齿的效果。（可利用calc()函数）
例如，将上述例子修改为：
linear-gradient(to top right,#00237D 42.5%,#FFFFFF calc(42.5% + 1px),#FFFFFF calc(57.5% - 1px),#00237D 57.5%)
注意：使用calc()函数，运算符号和数字间需要输入空格。
calc(42.5%+1px)（错误）calc(42.5% + 1px)（正确）em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax，参见 https://www.runoob.com/cssref/css-units.html