linear-gradient 用法小结，不做渐变，做斜型背景。

知道css3有新的属性叫linear-gradient，但是基本的线性渐变效果不太好看，加上平时没有在项目中用过这个 新属性，因此掌握的不好，今天朋友问我这个问题：

这样的背景图怎么做，然后我就说用背景图呗。然后又转念一想，css3是完全可以实现这个效果的，就试着写了一下，

html:

<div></div>

css:

div{

width:300px;

height:200px;

background:linear-gradient(top, red ,blue);

}

我能一下想到的渐变的写法就是这样。

但是惨了，这样出来的效果是渐变的啊：

给他变成：0-50%是红色 50%-50% 是红的渐变成蓝色，50%-100% 是蓝色，就是不用渐变了啊。

写成：background: linear-gradient(top, red ,red 50%,blue 50%,blue);

biubiu~biu 变成这样：

下面是加角度：

把第一个参数：top 换成一个角度，但是角度应该是多少呢？

试试吧

0deg 是蓝上 红下，180deg红上 蓝下，好像跟你想的有点不一样，那没关系，算一下就行了，

如设计图上显示，65°的角（我自己量的）。那我的角度应该写成：180-（90-65） = 155°

background: linear-gradient(155deg, red ,red 50%,blue 50%,blue);

效果是：

当然你可以继续往后追加颜色：

background: linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);

小结：兼容的写法是：

background: -webkit-linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);
background: -moz-linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);
background: -o-linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);
background: linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);

什么？你问我设计图上的角度我是怎么量出来的？量角器啊。

其实并不是，在ps里面用标尺沿着交接处话一条斜线，上面菜单栏上显示的就有角度。