CSS中的渐变效果

1.渐变的含义与组成

含义：两种或多种颜色之间平滑过渡的效果

组成：由色标来组成

色标：

1、颜色

2、颜色出现的位置

2.渐变的属性和取值

1、属性

               background-image

               取值：

               1、linear-gradient()

                    线性渐变

               2、radial-gradient()

                    径向渐变

               3、repeating-linear-gradient()

                    重复线性渐变

               4、repeating-radial-gradient()

                    重复径向渐变

3.线性渐变

               background-image:linear-gradient(angle,color-point,color-point,...);

               1、angle

                    作用：指定 渐变的 方向或角度

                    取值：方向的关键词或角度值

                         1、to top --> 0deg

                              从下向上填充渐变

                         2、to right --> 90deg

                              从左向右填充渐变

                         3、to bottom --> 180deg

                              从上向下填充渐变

                         4、to left --> 270deg

                              从右向左填充渐变

                         5、角度

                              0deg ~ 360deg

               2、color-point

                    作用：色标，标识一种颜色，以及出现的位置

                    ex:

                         开始的时候是红色 : red 0px/0%

                         50%的时候是蓝色 : blue 50%

                         结束的时候是绿色 : green 100% 

ex:

div{

backgroung-image:linear-gradient(to top, red 0%,blue 50%,green,100%);

}

该div元素线性渐变，方向是to top，即从下向上填充渐变，0%的时候是红色，50%的时候是蓝色，100%的时候是绿色

4.径向渐变

               background-image:radial-gradient([size at position],color-point,color-point,...);

               1、size at position

                    size:圆的半径

                    position:圆心的位置

                         1、数值

                              0px 0px ：圆心在元素的左上角

                              15px 30px :

                         2、百分比

                         3、关键字

left/center/right

top/center/bottom

           

                     注意：该参数可以省略，如果省略的话，那么圆心默认就在元素的中间位置处

    

ex:

div{

backgroung-image:radial-gradient(5px at 0px 0px, red 0%,blue 50%,green,100%);

}

该div元素径向渐变，圆的半径是5px，圆心在元素的左上角，0%的时候是红色，50%的时候是蓝色，100%的时候是绿色

5.重复渐变

              重复线性渐变： background-image:repeating-linear-gradient(angle,color-point,color-point);

               重复径向渐变： background-image: repeaiting-radial-gradient([size at position],color-point,...);

     

  其他用法和属性均与普通线性渐变和径向渐变相同

6.浏览器的兼容性

          可以通过 增加 浏览器前缀 的方式 实现兼容性

          Firefox : -moz-

          Chrome & Safari :-webkit-

          Opera : -o-

          前缀加在哪???

          如果浏览器不支持 属性的话，那么前缀就加在 属性名称之前

          ex

           animation : 动画属性

           -moz-animation ：值;

          如果浏览器支持属性但不支持值的话，那么前缀就加在 属性值前

          ex

               background-image:背景图像可以做渐变

               background-image:linear-gradient();

               background-image:-moz-linear-gradient();

               background-image:-webkit-linear-gradient();

               background-image:-o-linear-gradient(); 

7.效果图对比

线性渐变：

background-image: linear-gradient(to top,red 0%,blue 50%,green 100%);

径向渐变：

background-image:radial-gradient(100px at center center,red 0%,blue 50%,green 100%);

重复线性渐变：

background-image:repeating-linear-gradient(to top,red 0%,blue 50%,green 100%);

重复径向渐变:

background-image:repeating-radial-gradient(100px at center center,red 0%,blue 50%,green 100%);