CSS Gradient详解

前言

如今设计师同窗愈来愈高大上了，纯色背景已经不能知足人民群众日益增加的物质文化须要了，必须整渐变背景o(╯□╰)o。怎么还原呢，设计师直接丢过来一个几十K的图片，这怎么行。。。

还好咱们有CSS第三代！此次就来唠唠CSS3 Gradient(/ˈgreɪdɪənt/)的用法。

兼容性

从Can I use上看，现代浏览器支持程度良好，尤为移动端，对于不支持的浏览器，下文会提供一种采用纯色的降级方案。

可是各类兼容性问题确定免不了，Gradient和Flex box同样eggache，总共有三种语法规则，并且差别很大。。。

这里为了讨论简单，咱们只涉及最新的语法（基本能覆盖大量新浏览器了）。老旧语法规则和IE等各浏览器的兼容方法请见参考文章的二、3有详细的介绍，也可使用Gradient Generator或者autoprefixer自动生成代码。

前置知识

一、绘制区域，也就是规范中所谓的gradient box（为了理解无歧义，下文再也不翻译该术语），跟所关联DOM的实际尺寸有关，好比，设定background的话，绘制区域就是DOM的padding box，除非用backgroud-size指定大小；若是是设定list-style-image，绘制区域就是1em的正方形。

二、从W3C的描述中能够知道，浏览器实际是根据Gradient指定的语法来生成对应的图片

        A gradient is an image that smoothly fades from one color to another. 

      并且不仅background能够用，好比

1 2	background : linear - gradient ( white , gray ) ; list - style - image : radial - gradient ( circle , # 006 , # 00a 90 % , # 0000af 100 % , white 100 % ) ;

三、因为是image，因此用于background时，实际是设置在background-image上，若是只是单纯的渐变颜色，能够用如下的样式来对不支持的老旧浏览器作降级处理

1 2 3 4 5 6

. gradient { /* can be treated like a fallback */   background - color : red ; /* will be "on top", if browser supports it */   background - image : linear - gradient ( red , orange ) ; }

原理就借用慕课网的一张图：

Gradient有几个子特性，下面一一列出。

线性渐变（linear-gradient）

语法以下：

1 2 3 4 5

linear - gradient ( ) = linear - gradient (   [ | to ] ? ,   < color - stop - list > ) < side - or - corner > = [ left | right ] || [ top | bottom ]

第一个参数指明了颜色渐变的方向：

• 能够是角度，好比0deg，表示正上方向，90deg表示向右（顺时针）
• 也能够是关键词，好比to top, to right, to bottom, to left, 分别对应了0deg, 90deg, 180deg, 270deg。固然也能够不指定，默认值是to bottom

第二个参数指明了颜色断点（即color-stop）。位置能够省略，第一个默认为0%，最后一个默认为100%，若是中间的值没有指定，则按颜色数目求均值，好比

1 2 3

linear - gradient ( red 40 % , white , black , blue ) /*等价于*/ linear - gradient ( red 40 % , white 60 % , black 80 % , blue 100 % )

更多边界状况能够参考W3C规范，建议位置都采用一样的单位，避免产生意外状况。

浏览器是如何绘制渐变线的呢？

以下图，从gradient box的中心（对角线交点）开始以CSS中指定的角度向两侧延伸，终点是gradient box的一个相近顶点到gradient line垂线的垂足，起点也是相似的求法，两点间的距离就是gradient line的长度（浓浓的初中几何味~）。

因此，gradient line的长度计算公式是：

1 2	abs ( W  * sin ( A ) ) + abs ( H  * cos ( A ) ) A是角度， W是 gradient box的宽， H为高

是否是看完有种然并卵的感受：前端工程师哪里须要知道这些鬼啊。

非也非也，在开发UI的时候，清楚的知道浏览器原理，才能在脑中根据视觉稿正确的解构出CSS代码，不然只能在那里傻傻的试了又试。

🌰栗子一

如下的写法效果其实都同样 

1 2 3 4 5

background - image : linear - gradient ( yellow , green ) ; // 默认方向为to bottom   background - image : linear - gradient ( to bottom , yellow , green ) ; // 使用关键字指定方向   background - image : linear - gradient ( 180deg , yellow , green ) ; // 使用角度指定方向   background - image : linear - gradient ( to top , green , yellow ) ;   background - image : linear - gradient ( to bottom , yellow 0 % , green 100 % ) ; // 指定颜色断点

           

🌰栗子二

固然多个颜色断点也能够：

1	background - image : linear - gradient ( to bottom , # FF0000 14.28 % , # FFA500 14.28 % , # FFA500 28.57 % , # FFFF00 28.57 % , # FFFF00 42.85 % , # 008000 42.85 % , # 008000 57.14 % , # 0000FF 57.14 % , # 0000FF 71.42 % , # 4B0082 71.42 % , # 4B0082 85.71 % , # 800880 85.71 % , # 800880 100 % ) ;

这个例子还有个小技巧，Gradient中两个不一样颜色间默认是渐变的，但若是咱们须要作出图中这种颜色明显变化的效果（锐变），就能够用同一个位置不一样颜色的方式实现。

🌰栗子三

在颜色上设置透明度渐变

1 2 3 4 5 6 7 8 9

. gradient - 1 {   background - image : url ( http : //a57.foxnews.com/global.fncstatic.com/static/managed/img/fn2/876/493/EmmaWatsonBrown.jpg);   background - size : 100 % 100 % ; }   . gradient - 2 {   background : linear - gradient ( to right , rgba ( 255 , 255 , 255 , 0 ) , rgba ( 255 , 255 , 255 , 1 ) ) , url ( http : //a57.foxnews.com/global.fncstatic.com/static/managed/img/fn2/876/493/EmmaWatsonBrown.jpg) no-repeat;   background - size : 100 % 100 % ; }

效果以下，左边原图，右边增长了一层遮罩，这个效果实际上是利用了CSS3的多背景语法

更多例子能够在这里看 http://lea.verou.me/css3patterns/

径向渐变（radial-gradient）

radial gradient其实就是颜色从一个点以同心圆或者椭圆向外渐变。

简化版语法以下：

1 2 3 4

radial - gradient ( ) = radial - gradient (   [ || ] ? [ at ] ? ,   < color - stop - list > )

• position用来指定渐变圆心的位置，默认为center，赋值规则与background-positon的相似；
• ending-shape能够是circle或者elipse，若是省略，则默认值与size相关，size指定一个值就是圆形，不然是椭圆；
• size能够是具体的值，也能够用关键字指定，默认值是farthest-corner。若是是具体值，圆形须要一个数值，椭圆须要两个。关键字则包括：

   

   

  • closest-side 指gradient box某一边到盒子中心最近的距离；
  • farthest-side 指gradient box某一边到盒子中心最远的距离；
  • closest-corner 指gradient box某一顶点到盒子中心最近的距离；
  • farthest-corner 指gradient box某一顶点到盒子中心最远的距离；
• color-stop-list与linear-gradient相似

注意：

• size的数值不能是负数
• W3C规范规定，百分比的数值只能用于椭圆，不能用于圆形。
• position的值能够是负数

因此，复杂版语法以下：

1 2 3 4 5 6 7 8 9 10

radial - gradient ( ) = radial - gradient (   [ [ circle               || ]                          [ at ] ? , |     [ ellipse              || [ | ] { 2 } ]    [ at ] ? , |     [ [ circle | ellipse ] || ]                  [ at ] ? , |     at < position > ,   ] ?   < color - stop > [ , ] + ) < extent - keyword > = closest - corner | closest - side | farthest - corner | farthest - side

🌰栗子一

如下几种写法是等价的

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

. gradient - 1 {   background - image : radial - gradient ( yellow , green ) ; }   . gradient - 2 {   background - image : radial - gradient ( ellipse at center , yellow 0 % , green 100 % ) ; }   . gradient - 3 {   background - image : radial - gradient ( farthest - corner at 50 % 50 % , yellow , green ) ; }   . gradient - 4 {   background - image : radial - gradient ( ellipse farthest - corner at 50 % 50 % , yellow , green ) ; }

🌰栗子二

看下size各类关键字的效果

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

. gradient - 1 {   background - image : radial - gradient ( circle closest - side at 30 % 50 % , yellow , green ) ; }   . gradient - 2 {   background - image : radial - gradient ( circle farthest - side at 30 % 50 % , yellow , green ) ; }   . gradient - 3 {   background - image : radial - gradient ( circle closest - corner at 30 % 50 % , yellow , green ) ; }   . gradient - 4 {   background - image : radial - gradient ( circle farthest - corner at 30 % 50 % , yellow , green ) ; }

圆心没设置在中心是由于矩形的对角线相等且平分，因此closest-corner = farthest-corner，就无法比较差别了。

重复渐变（Repeating Gradients）

基本语法与上面的线性渐变和径向渐变相似，就是增长了重复的特性。

从Can I use的数据看目前支持程度不乐观，PC除了IE都还不错，移动端Android4.0如下都红o(╯□╰)o。。

可是了解下仍是必要的

 

重复的规则简单说就是用最后一个颜色断点的位置减去第一个颜色断点位置的距离做为区间长度，不断的重复。好比repeating-linear-gradient(red 10px, blue 50px) 就至关于linear-gradient(…, red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, …)

至于首尾颜色距离为0等特殊状况，这里就不细说 了，能够到W3C规范自行研究。

🌰栗子

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

div {   width : 100px ;   height : 100px ;   margin : 10px ;   border : 1px solid blue ;   float : left ; }   . repeat - linear {   background - image : repeating - linear - gradient ( 45deg , white , white 10px , red 10px , red 20px ) ; }   . repeat - radial {   background : repeating - radial - gradient ( circle at bottom left , white , white 10px , red 10px , red 20px ) ; }

根据上面说的规则，这个例子里的区间长度是首尾颜色的位置之差，是20px。

咱们能够验证下，两张图里都有约7个红白条，矩形宽高均100px，对角线则是约140px，140px/7=20px，bingo！