回到顶部
我的头像

RedSpite

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%);/* 标准的语法(必须放在最后) */
                                }
                            

2016.08.01

© RedSpite | 蜀ICP备16004270号