toc

Intro

渐变无疑对网页的呈现有着很好的帮助，webkit最早支持渐变，随后火狐也开始支持渐变，但是语法上和webkit的不同，之后css3中也将渐变列入标准，语法与FF的相似。

之前的浏览器都不支持标准的写法，因此稍微早点的博客或者书籍都是分开描述两者的实现，但是现在webkit优化了渐变属性，而Firefox16之后也支持了标准的写法，因此本文主要讨论下css3规范中的写法。

渐变可以分为两类，线性渐变（linear）和径向渐变（radial）两种，css3渐变属性中值比较多，但是稍稍想想便可提炼出来渐变需要的值，渐变方式 ，始末点，变化着的颜色，以及颜色间的距离（步长），如果是线性渐变则还有渐变的角度。如果用过ps的渐变对此应该不难理解。 下面分别讨论线性和径向渐变。

一、线性渐变

css规范中标准的语法为：
= linear-gradient( [ [ | to ] ,]? [, ]+ )

• 第一个值定义了线性渐变的角度，和color-stop的位置，如果省略，则为默认值 to bottom - 角度中0deg代表垂直向上，以顺时针方向旋转，则90deg代表水平向右，准确度的计算方式看图一。
• =[ left | right ] | | [ top | bottom ]，to top=0deg，to right=90deg，to bottom=180deg，top left=270deg。如果为角度，如to top right，则线性渐变的渐变线垂直正交于对应角度的两个边，即渐变线为该角度的等分线（初中几何;)）,此处比较复杂，看图比较直观，需要注意的是设置为 to left right之后在50%位置的颜色会从左上角覆盖到右下角，而且to top right≠45deg（如图二）。
• 其余的值便是color-stop，值为颜色 和 起始位置，其实位置值可以为百分值，或者px值，若为纯数字默认为px值。起始颜色的位置默认为0%或者0px，类比于ps中的渐变，其颜色的位置点不一定在盒子范围内，可以想象为只是元素盒子范围内的颜色被显示出来了。

.box1 { background-image: linear-gradient(45deg ,#8C0095,#008299,#5133AB) } .box2 { background-image: linear-gradient(to top right ,#8C0095,#008299,#5133AB) }

css3规范中定义的线性渐变的方向还是比较模糊，因此w3c.org页面上提到希望改进的想法：

It is expected that the next level of this module will provide the ability to define the gradient’s direction relative to the current text direction and writing-mode.

webkit的写法和标准的很接近，只是定义线性渐变方向的方式不同，当定义为角度值得时候两者呈现一样，而定义为关键词的时候，标准中更多的是从渐变结束点的角度来定义，而webkit则是从起始点来呈现，且若设置为两个关键词也没有标准中color-stop在50%位置下的呈现。

.box1 { background-image: -webkit-linear-gradient(45deg, #8C0095,#008299 50%,#5133AB); background-image: linear-gradient(45deg ,#8C0095,#008299,#5133AB) } .box2 { background-image: -webkit-linear-gradient(top right, #8C0095,#008299,#5133AB); background-image: linear-gradient(to top right ,#8C0095,#008299,#5133AB); }

webkit还支持的写法有:

 background-image: -webkit-gradient(linear , left top , left bottom ,color-stop(0.3 , #8C0095) ,color-stop(0.6 ,#5133AB), to(#008299));

二，径向渐变
= radial-gradient([ [ || ] [ at ]? , |at ,]? [ , ]+)

• 制定了径向渐变的类型为circle（圆）或者ellipse（椭圆）如果值缺省或者为一个值得时候默认为circle，负责则为ellipse。
• 定义了径向渐变的大小，可以精确定义或者使用关键词，缺省的情况下默认为farthest-corner。 - 关键词有closest-sede、farthest-side、closest-corner、farthest-corner(效果如下图四)。
• 在circle的情况下，可以精确定义，不接受百分值。
• 在ellipse的情况下，精确定义可以为[ | ] {2}
• 因此扩张之后的语法可以为 = radial-gradient([ [ circle || ] [ at ]? , | [ ellipse || [ | ]{2} ] [ at ]? , |[ [ circle | ellipse ] || ] [ at ]? , |at ,]? [ , ]+)
• 在ellipse的情况下如果宽度值接近于0，而高度值远大于宽度值，则渐变类似于水平的线性渐变，相反则呈现为垂直线性渐变。
• 定义了径向渐变中心的位置，其值和background-position相同，如果缺省，默认为center。
• 的写法与线性渐变的相似。

.box3 { background-image: radial-gradient(farthest-corner at left top ,#8C0095,#008299 50%,#5133AB); } .box4 { background-image: radial-gradient(farthest-side at left top ,#8C0095,#008299 50%,#5133AB); } .box5 { background-image: radial-gradient(closest-corner at 40px 20px ,#8C0095,#008299 50%,#5133AB); } .box6 { background-image: radial-gradient(closest-side at 40px 20px ,#8C0095,#008299 50%,#5133AB); }

webkit下的径向渐变不知上述的size关键词，其下图代码的呈现效果中和标准中farthest-corner一样。

经过测试ie10已经支持css3渐变，ie9以下的浏览器不支持css3渐变，渐变需要ie滤镜来实现，再此不做讨论。

若要考虑兼容webkit以前的版本，其语法如下：

—————————webkit浏览器以前的语法：———————————

-webkit-gradient(, [ , ]? , [ , ] ? [stop] *)

• ：定义渐变类型，linear  | radia
• ：定义 渐变的起始位置和结束位置（x轴和y轴坐标），支持数值，百分比，和关键字（top，right，bottom，left）。
• ：当为径向渐变的时候，定义渐变的长度，值为数值。
• ：定义渐变色和步长，有三个类型的值 - 开始颜色，使用from(color)来定义
• 结束颜色，to(color)
• 颜色步长，在实际应用中使用color-stop(value , color)来定义中间颜色的位置和颜色值，value值（数值或者百分比，取值范围0~1.0或者0%~100%）定义位置，color定义颜色。

下面是个简单的线性渐变和径向渐变的例子

.box1 { background-image: -webkit-gradient(linear , left top , left bottom , form(#008299) , to(#2672EC) , color-stop(0.3 , #8C0095) ,color-stop(0.6 ,#5133AB)); } .box1 { background-image: -webkit-gradient(radial , 100 100  ,10,200 200 ,50 , form(#008299) , to(#2672EC) , color-stop(0.3 , #8C0095)); }

———————–每篇一美图————————