css3渐变效果

学习资料：菜鸟教程；http://www.runoob.com/css3/css3-gradients.html

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

1.线性渐变：（1）从上到下（效果图）；

代码：

从下到上，从左到右等都能实现；

        background: linear-gradient(to right,blue,red,gray);
          /*兼容性判断*/
        background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

实现对角渐变：

除此之外还能采用角度值，直接将to bottom,to left直接替换成20deg，30deg等等；

设置颜色值时，除了英文单词，还能rgba等使用透明度；

还可以重复线性渐变：repeating-linear-gradient() 函数用于重复线性渐变需要加百分比才能出现这种效果：

CSS3 径向渐变

均匀径向渐变；

非均匀径向渐变只要颜色后面加百分比：

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

圆形通过设置第一个参数为circle就行

径向渐变不同尺寸关键字的使用：closest-side，farthest-side，closest-corner