一句话样式代码实现CSS3 background 渐变效果

这里老蒋需要给一个客户的网站设置背景渐变色，这里看到这一组配色效果还是不错的，于是就将这些脚本记录下来，以后如果有需要的话还可以用到。这实现方法是用到CSS3 background 渐变效果。

这里用到的是现行渐变效果。

background:linear-gradient

Select CodeCopy

设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色

Linear 渐变的类型：

1、渐变的形式：可选参数 有两种方式-1、设置旋转角度，0度代表水平从左到右，90度就是从上到下啦，从0度开始逆时针变换。

2、使用关键字，left代表从左到右，top代表从上到下，同理right就是从右到左，lefttop-从坐上到右下，同理leftbottom，righttop，rightbottom。

几个案例样式记录：

background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);

background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);

background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);

background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);

background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);

background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);

Select CodeCopy

最后附带径向渐变的规范和方法