CSS3的配景色彩background渐变代码

画了几个标致的渐变色，临时不考虑兼容性题目了，嘿嘿。

代码：

background-image: linear-gradient(0deg, #fff 0%,#000 100%);

上面是主代码，括号内的0deg是角度，背面跟着一个色彩和色彩开端的位置，背面跟着另一个色彩和色彩完毕的位置，可以写许多个色彩，标注好位置就好。

样式1

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

样式2

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

样式3

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

样式4

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

样式5

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

样式6

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

线性渐变：

background:linear-gradient(设定渐变情势,首先个色彩起点,中间色彩点 中间色彩的位置,完毕点色彩);

Linear:渐变的类型（线性渐变）；

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

 

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

中间色彩与中间色彩位置为可选参数。

不外要考虑阅读器的兼容，咱们这样写：

-webkit-gradient（linear,0  0,0  100%,from(起始色彩,to(完毕色彩)）；  /*for Safari4+,Chrome 2+*/

-webkit-linear-gradient（起始色彩, 完毕色彩）；  /*for Safari 5.1+,Chrome 10+*/

-moz-linear-gradient（起始色彩, 完毕色彩）；  /*for firefox*/

-o-linear-gradient（起始色彩, 完毕色彩）；  /*Opera*/

linear-gradient（起始色彩, 完毕色彩）；  /*规范属性*/