CSS3 渐层特效教学

在做网页设计时，如果要使用渐层的背景，通常会使用的做法是利用软体将整个背景制作出来，例如左边那样，是做好之后再插入到网页中的，现在新的CSS3出来了之后，可以直接使用语法就产生一模一样的背景。

什么?你说你不知道CSS 3的语法吗?没关系，可以使用下面的网站，只要点一点拉一拉，他会自动生成个浏览器对应的CSS 3的语法，再直接套用就可以拉。

网站1：Ultimate CSS Gradient Generator
网站2：CSS Gradient Background Maker

　　不过...有点遗憾的事情是，到小编写这篇文章为止，最新的IE 9.0，还是没有办法完整支援CSS 3的渐层效果，所以在产生的CSS 3的语法之后，可以利用之前提过的CSS HACK，让IE系列的浏览器使用原本的方法呈现，不过从网站产生的语法注解中，看到了IE 10的踪影，让我们期待一下IE 10可以对CSS 3.0有更完整的支援。

　　左边的是使用CSS的语法产生的，不过如果读者你是用IE浏览器的话，恩你应该会看到一块空白，这个是因为IE还没有完全支援，请换个浏览器来看看，你就会看到有个用CSS 产生的渐层圆圈在旁边的。

语法

/* IE10 */
background-image: -ms-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Opera */
background-image: -o-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 143, color-stop(0, #00A3EF), color-stop(1, #FFFFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Proposed W3C Markup */
background-image: radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);

这边说明一下圆形语法，各个浏览器的语法稍稍有点不同，不过大致上如下面的规则：

radial-gradient( 圆心位置,形状形状参数,颜色颜色停止位置,颜色颜色停止位置...)

• radial-gradient：表示要使用的是圆形渐层。
• 圆心位置：起始位置，例如上面的范例写的是center，表示从div的中间开始，指定的方法就和一般我们在设定CSS background的方法一样。
• 形状：circle(正圆) | ellipse(椭圆) ，可省略，预设值是ellipse
• 形状参数：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover，可省略，预设值是cover
• 1. closest-side：渐变的半径长度为从圆心到离圆心最近的边。
  2. closest-corner：渐变的半径长度为从圆心到离圆心最近的角。
  3. farthest-side：渐变的半径长度为从圆心到离圆心最远的边。
  4. farthest-corner：渐变的半径长度为从圆心到离圆心最远的角。
  5. contain：包含，渐变的半径长度为从圆心到离圆心最近的点。类似于closest-side。
  6. cover：覆盖，渐变的半径长度为从圆心到离圆心最远的点。类似于farthest-corner。
• 颜色：颜色就如同本来CSS的指定颜色方法。
• 颜色停止位置：颜色停止的位置，可用长度或百分比显示。