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();