渐变+过渡

浏览器前缀

 浏览器前缀 ：

                          -moz-     火狐浏览器
                          -ms-      IE浏览器
                          -o-       欧朋浏览器
                          -webkit-  谷歌、苹果浏览器

                部分css属性 在各个浏览器的兼容问题  需要添加浏览器的前缀

渐变

css3 属性   渐变    gradient   
      

              1  线性渐变 ：
                            两种或多种颜色在一个方向上平稳的平铺

        标准语法：              background：linear-gradient(direction,color1,color2,color3);
                                    
                                     方向  to left   代表    到左边 即从右到左
                                           to right           从左到右
                                           to top             从下到上
                                           to bottom          从上到下
                                           to left top        从右下到左上
                                           to left bottom     从右上到左下
                                           to right top       从左下到右上
                                           to right bottom    从左上到右下

                                    角度   deg    0度  是从下到上  40度 即向顺时针转了40度


        兼容语法                background: -webkit-linear-gradient(direction,color1,color2,color3);
                                  

                                    方向   left/right/top/bottom  
                                           left top /  left bottom / right top /right bottom 
                                            
                                            从 左开始  从右开始  ...

                                    角度    deg   40度   0度 从左到右  40度 即 向逆时针转了40度 

                            
                               两种语法的效果保持一直    to left  对应right
                                                        40度    对应  90  -  40  =  50     
           
         
                
                径向渐变    
                            多个颜色以一个中心点向周围平稳的平铺

                   语法     background:radial-gradient(direction,shape,size,color1,color2,color3);

                          方向    默认为center
                                可以为像素  也可为百分比

                          形状   默认为ellipse 椭圆
                                 如果元素为正方形  则 默认与circle 效果一样

                          size   为中心点到各个方向的距离
                                  closest-side  最近边  
                                  farthest-side  最远边
                                  closest-corner 最近角
                                  farthest-corner 最远角


         重复性线性渐变    background:-webkit-repeating-linear-gradient(color,color10%,color20%);


         重复性径向渐变    background:-webkit-repeating-radial-gradient(color,color10%,color20%);

过渡

过渡   transition
                   
                 语法     transition-property    需要添加过渡的属性  默认值为 all 
                         transition-duration        过渡的时间
                         transition-delay               延迟的时间
                         transition-timing-function   添加过渡的类型  默认linear 

                    简写  transition:属性 all ，时间，延迟的时间，类型先加速后减速;