css的渐变

一、渐变

从一个颜色过渡到另一个颜色

二、常见浏览器(5种)

谷歌：-webkit-

火狐;-moz-

欧鹏:-o-

苹果:-webkit-

ie:-ms-

三、线性渐变

由一个方向过渡到另一个方向

1、线性渐变的写法

background：linear-gradient(to方向，颜色1，颜色2，....)

2、线性渐变加前缀的写法

background：前缀linear-gradient(方向，颜色1，颜色2，....)

注意：加前缀后方向不用加to，同时意思发生变化，变为起始方向

3、线性渐变——对角线

background：linear-gradient(to方向1 方向2，颜色1，颜色2，....)

4、线性渐变——角度

background：linear-gradient(0deg，颜色1，颜色2，....)

0deg是从下往上

角度增大是顺时针

加前缀：

background：-ms-linear-gradient(0deg，颜色1，颜色2，....)

0deg是从左往右

角度增大是逆时针

四、径向渐变

1、径向渐变的写法

background：前缀radial-gradient(起点，颜色1，颜色2，....)

eg:background：-webkit-radial-gradient(center，颜色1，颜色2，....)

注意：径向渐变要有起点一定要有浏览器前缀。

            如果不写起点默认十年中心，没有起点就可以没有浏览器前缀。

             起点的写法：（1）center、left、top、....

                                      (2)像素点（水平 垂直）

                                   （3）百分比写法（水平 垂直）

五、重复性渐变

1、线性重复渐变

background：repeating-linear-gradient(to方向，颜色1 0%，颜色2 10%，....)

2、径向渐变重复

background：前缀repeating-radial-gradient(起点，颜色1，颜色2，....)

eg:background：-webkit-repeating-radial-gradient(center，颜色1，颜色2，....)

注意：径向渐变要有起点一定要有浏览器前缀。

            如果不写起点默认十年中心，没有起点就可以没有浏览器前缀。