CSS3 渐变背景色各种方向 兼容IE9+

在前端书写网页实际运用中，单一的背景色并不能很好地满足需要，在不使用图片资源的选择下，我们还可以使用渐变背景色使自己的页面更丰富。

渐变背景分为两种：

1. 线性渐变

2. 环形渐变

首先来介绍线性渐变：

线性渐变

线性渐变分为：横向、纵向、对角渐变三种渐变

                        background:linear-gradient(参数1，参数2，参数3，参数4....参数N)
                        background:-webkit-linear-gradient(参数1'，参数2，参数3,参数4....参数N)
                    

参数1：可填可不填，填写的话写方向 如：to right,就是渐变方向由左到右，不填写默认从上到下渐变。

参数1'：与参数1基本一致，写在-webkit-,-moz-,-o-前缀情况下，如：left 代表渐变方向开始的位置

参数2：渐变开始颜色，可填rgba()或者#fff或者white,后面加百分比代表颜色占比多少，如 #fff 50% 代表白色占比50%。

参数3：若后面无参数 则为渐变终止颜色，与参数2属性可选一致。

参数4....参数N:可增加的渐变颜色节点。最后一个为渐变终止颜色

• 从上至下
• 从下至上
• 从左至右
• 从右至左
• 从左上至右下
• 带透明度
• 多个颜色节点
• 重复的渐变

•                             #text.ttb{
                                  /*从上至下是默认方向*/
                                  background: -webkit-linear-gradient(#fff, #75aaa2); /* Safari 5.1 - 6.0 */
                                  background: -o-linear-gradient(#fff, #75aaa2); /* Opera 11.1 - 12.0 */
                                  background: -moz-linear-gradient(#fff, #75aaa2); /* Firefox 3.6 - 15 */
                                  background: linear-gradient(#fff, #75aaa2); /* 标准的语法（必须放在最后） */
                              }
                          

•                             #text.btt{
                                  background: -webkit-linear-gradient(bottom,#fff, #75aaa2);
                                  background: -o-linear-gradient(bottom,#fff, #75aaa2);
                                  background: -moz-linear-gradient(bottom,#fff, #75aaa2);
                                  background: linear-gradient(to top,#fff, #75aaa2); /* 标准的语法（必须放在最后） */
                              }
                          

•                             #text.ltr{
                                  background: -webkit-linear-gradient(left,#fff,#75aaa2);
                                  background: -moz-linear-gradient(left,#fff,#75aaa2);
                                  background: -o-linear-gradient(left,#fff,#75aaa2);
                                  background: linear-gradient(to right,#fff,#75aaa2);/*标准写法（必须放在最后）*/
                              }
                          

•                             #text.rtl{
                                  background: -webkit-linear-gradient(right,#fff,#75aaa2);
                                  background: -moz-linear-gradient(right,#fff,#75aaa2);
                                  background: -o-linear-gradient(right,#fff,#75aaa2);
                                  background: linear-gradient(to left,#fff,#75aaa2);/*标准写法（必须放在最后）*/
                              }
                          

•                             #text.tltbr{
                                  background: -webkit-linear-gradient(top left,#fff,#75aaa2);
                                  background: -o-linear-gradient(top left,#fff,#75aaa2);
                                  background: -moz-linear-gradient(top left,#fff,#75aaa2);
                                  background: linear-gradient(to bottom right,#fff,#75aaa2);/*标准写法（必须放在最后）*/
                              }
                          

•                             #text.opac{
                                  background: -webkit-linear-gradient(rgba(256,256,256,0), #75aaa2);
                                  background: -o-linear-gradient(rgba(256,256,256,0), #75aaa2);
                                  background: -moz-linear-gradient(rgba(256,256,256,0), #75aaa2);
                                  background: linear-gradient(rgba(256,256,256,0), #75aaa2); /* 标准的语法（必须放在最后） */
                              }
                          

•                             #text.colors{
                                  background: -webkit-linear-gradient(#fff,#a0d6a6, #75aaa2);
                                  background: -o-linear-gradient(#fff,#a0d6a6, #75aaa2);
                                  background: -moz-linear-gradient(#fff,#a0d6a6, #75aaa2);
                                  background: linear-gradient(#fff,#a0d6a6, #75aaa2); /* 标准的语法（必须放在最后） */
                              }
                          

•                             #text.repeat{
                                  background: -webkit-repeating-linear-gradient(#fff 10%,#75aaa2 20%);
                                  background: -o-repeating-linear-gradient(#fff 10%,#75aaa2 20%);
                                  background: -moz-repeating-linear-gradient(#fff 10%,#75aaa2 20%);
                                  background: repeating-linear-gradient(#fff 10%,#75aaa2 20%);/* 标准的语法（必须放在最后） */
                              }