本来想先废话，但是后面又不知道该聊什么了，就直接跑题了。
参考：
使用CSSgradients[]（以及本页面中的大多数链接页面）
首先，黑色背景通常是指background-color属性，而渐变色是指background-image属性，将其作为背景图像处理。
渐变有两种类型：线性渐变（直线扩散）和径向渐变（从圆心扩散）。
线性渐变：线性渐变|重复线性渐变
径向渐变：径向渐变|重复径向渐变
线性渐变
句子格式：
linear-gradient( [ <angle/*角度*/> | to /*方向*/ ,]? <color-stop/*渐变开始的颜色*/> [, ]+/*渐变结束的颜色，开始-结束的区间内包含渐变涉及到的颜色列表*/ ) = [left | right] || [top | bottom] = [ <percentage/*当前渐变色所占百分比*/> | <length/*当前渐变色起始位置，也代表上一个颜色渐变结束的位置*/> ]
使用代码及疗效图
<div class="test"></div>
两种颜色的渐变
/*此例由黑色渐变至红色*/ .test{ width:300px; height: 100px; background-image: linear-gradient(black, red); /*默认是从上到下的渐变*/ /*background-image: linear-gradient(to top, black, red);*/ /*从下到上的渐变*/ /*background-image: linear-gradient(to right, black, red);*/ /*从左到右的渐变*/ /*background-image: linear-gradient(to left, black, red);*/ /*从右到左的渐变*/ }
疗效图如下：
三种及以上颜色的渐变
/*此例由黑色渐变至红色再至黄色*/ .test{ width:300px; height: 100px; background-image: linear-gradient(black, red, yellow); /*从上到下*/ /*background-image: linear-gradient(to top, black, red, yellow);*/ /*从下到上*/ /*background-image: linear-gradient(to right, black, red, yellow);*/ /*从左到右*/ /*background-image: linear-gradient(to left, black, red, yellow);*/ /*从右到左*/ } /*... 按此规则依次加颜色列表，实现多色渐变*/
疗效图如下：
渐变距离控制
.test{ width:300px; height: 100px; background-image: linear-gradient(to right, black 5px, red 60px, yellow 100px, purple 300px); }
疗效图如下：
将位置值的含义添加到渐变颜色中：
1、div[class="test"]的背景颜色执行从左到右的渐变
2.0px-5px为黄色
3.5px-60px是从蓝色到绿色的渐变
4.60px-100px是从白色到红色的渐变
5.100px-300px是从红色到红色的渐变
每两种颜色之间的渐变距离就是位置差。
如果后一个颜色的起始位置值大于前一个颜色的起始位置值，则两种颜色之间的渐变距离为0，导致直接颜色变化。
最后一个颜色不需要设置起始位置的值，默认渐变到总宽度的末尾（这里指的是div的长度）。 如果最后一种颜色的起始位置的值大于总宽度的值，则从该值到总宽度的末尾将用黑色填充。
使用比例：
.test{ width:300px; height: 100px; background-image: linear-gradient(left, black 10%, red 30%, yellow 50%, purple 100%); }
与上面的解释相同。
不同角度的渐变
上面的情况都是用来确定渐变的方向的，你可以根据自己的喜好来定义方向。
webkit 内核中的 deg
普通模式（指不指定浏览器内核的风格）deg
angle的角度值与上图中角度值表示的方向一致。
/*这里以标准的为例*/ .test{ width:300px; height: 100px; background-image: linear-gradient(0deg, black, red); /*从下至上*/ /*background-image: linear-gradient(45deg, black, red);*/ /*从左下角至右上角*/ /*background-image: linear-gradient(90deg, black, red);*/ /*从左至右*/ /*background-image: linear-gradient(135deg, black, red);*/ /*从左上角至右下角*/ /*background-image: linear-gradient(180deg, black, red);*/ /*从上至下*/ /*background-image: linear-gradient(225deg, black, red);*/ /*从右上角至左下角*/ /*background-image: linear-gradient(270deg, black, red);*/ /*从右至左*/ /*background-image: linear-gradient(315deg, black, red);*/ /*从右下角至左上角*/ }
径向渐变
句子格式：
radial-gradient( [ circle/*圆*/ || /*半径大小*/ ] [ at /*圆心所在位置*/ ]? , | [ ellipse/*椭圆*/ || [ | ]{2}]/*百分比*/ [ at /*圆心所在位置*/ ]? , | [ [ circle | ellipse ]/*圆or椭圆*/ || /*椭圆离(最近，最远)边或角的距离*/ ] [ at /*圆心所在位置*/ ]? , | at , [ , ]+/*渐变颜色列表及位置*/ ) = closest-corner | closest-side | farthest-corner | farthest-side = [ | ]
使用代码及疗效图
<div class="test"></div>
圆形的
.test{ width: 300px; height: 100px; background-image: radial-gradient(50px at 50% 50% , white 0%, red 50%, purple 99%, transparent 99%); }
上面代码的圆心在元素的中心点（50%50%），直径为50px，圆心为黑色，从圆心到圆心从红色到灰色的变化直径的50%，以及从直径的50%到99%从黑色到红色。 从直径宽度的 99% 到 99% 从红色到透明的渐变。
注：transparent99%（或0%-99%）指定圆的99%到100%的背景颜色是透明的。 如果删除此设置，剩余部分将用之前的背景颜色填充。 其实css3线性渐变，现在这里这个值是99%，其他地方也可以是其他值，范围是根据最后一个颜色到圆心的距离来确定的。
椭圆形
.test{ width: 300px; height: 100px; border: 1px solid black; background-image: radial-gradient( ellipse farthest-corner at 30% 30% , white 0%, red 20%, purple 30%, transparent 30%); }
首先选择圆的类型为椭圆，然后选择extent-keyword确定椭圆的大小（最远角），然后选择atposition确定圆心的位置（30%30%），然后选择每日渐变颜色列表和渐变范围。
疗效图如下：
分析extent-关键字：
最接近边：椭圆的大小根据靠近圆心的最近边指定。
closest-corner：椭圆的大小是根据靠近圆心的最近的角（椭圆所在元素的角）来指定的。
最远边：椭圆的大小根据靠近圆心的最远边指定。
farthest-corner：椭圆的大小根据靠近圆心的最远角（椭圆所在元素的角）来指定。
以上图为例，规定了最远角。 此时最远的角为div的点D所在的角（最近的角为A点所在的角，最近的边为AB边，最远的边为BD边），而椭圆的大小为30%，圆心为O点，OF:OD=3:10css3线性渐变，所谓的30%就是这样得到的（其实也可以用像素来指定） 。
...其余规则遵循这样...
渐变重复
线性重复
句子格式：
repeating-linear-gradient( [ /*角度*/ | to /*方向*/ ,]? [, ]+/*渐变颜色列表*/ ) = [left | right] || [top | bottom] = [ | ]
案件：
.test{ width: 300px; height: 100px; border: 1px solid black; background-image: repeating-linear-gradient(180deg, transparent, transparent 5px, black 5px, black 10px),repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 10px); }
疗效图如下：
重复线性梯度也可以重复使用
.test{ width: 300px; height: 100px; border: 1px solid black; background-image: repeating-linear-gradient(180deg, transparent, transparent 5px, black 5px, black 6px),repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 6px); }
疗效图如下：
角度和方向可根据个人需要选择。
其实有了线性重复，径向也不会示弱，我们来看看径向重复。
句子格式：
repeating-radial-gradient( [[ circle/*圆*/ || /*半径*/ ] [at ]?/*位置*/ , | [ ellipse/*椭圆*/ || [ | ]{2}] [at ]? , | [[ circle | ellipse ] || ] [at ]? , | at , [ , ]+ ) = closest-corner | closest-side | farthest-corner | farthest-side = [ | ]
这个是圆形的：
.test{ width: 300px; height: 100px; border: 1px solid black; background-image: repeating-radial-gradient(circle, black, black 5px, white 5px, white 10px); }
疗效图如下：
这个是椭圆形的：
.test{ width: 300px; height: 100px; border: 1px solid black; background-image: repeating-radial-gradient(ellipse, black, black 5px, white 5px, white 10px); }
疗效图如下：
暂时就写这些吧，具体应用就看各人给出什么样的设计图了~每种疗效我都懒得截图了……
同时欢迎大家交流讨论各种技术问题~
发表评论