玩坏css3之linear-gradient揭秘《线性渐变》

没看《css揭秘》之前，我一般就会这样使用liner-gradient(top, #000, #fff)/liner-gradient(45deg, #000, #fff);

我相信很多同事对gradient认知也是到这里，网上普遍也是这样介绍！

正常的情况下：liner-gradient(pink,#fff)在div盒子中是自上而下渐变,如下图：

.second{margin: 20px auto;width: 400px;height: 100px;background: linear-gradient(pink, #ffffff)}

接下来就是神奇的地方了！在此我再着重推荐一下《css揭秘》[LEA VEROU著]，大家可以看看

先解读一下下面的第一行代码：

background: linear-gradient(-135deg, transparent 71px, #20B2AA 0) ；

background-size: 100% 100%;(这行代码也很重要，为下面的样式做铺垫,这个代码不清楚的赶紧去w3c看）

background-repeat: no-repeat;

首先大家都能理解：第一个参数：线性渐变方向，

第二个参数：切角深度，（等下看展示效果再解析）

第三个参数： 就是渐变颜色，如果（#20B2AA 0）后面不加0的话，默认情况下

从#20B2AA渐变到#ffffff,所以用0代替，取消颜色渐变

如图所示：（一些其他样式的代码就没写上去了，主要理解上面的三行代码就行了）

那个箭头长度就是所谓的深度，也就是所谓的三角形斜角边的高！（这个大家默认大家都会的啊）

有时候我们需要这样的样式：

这就要牵扯到background-size以及 liner-gradient() top left(指定左上角)

liner-gradient() top right(指定右上角)

liner-gradient() bottom left(指定左下角)

liner-gradient() bottom right(制定右下角)

我们都知道，再怎么颜色渐变都是平铺过来的

那我们就可以指定 平铺的大小！即通过（backround-size）

第一个角：就是左上角 且 平铺的大小是1/4的div大小，那么大小水平和竖直方向就是各50%，

同理：其他三个角平铺的大小都是一样的。即

background-size(50% , 50%)

第一个角平铺：

background:liner-gradient(135deg, transparent 15px, pink 0) top left,(1)

第二个角平铺：

background:liner-gradient(-135deg, transparent 15px ,pink 0) top right (2)

第三个角平铺：

background:liner-gradient(-45deg, transparent 15px ,pink 0) bottom right (3)

第四个角平铺：

background:liner-gradient(45deg, transparent 15px ,pink 0) bottom left (4)

总和代码：

background: linear-gradient(135deg, transparent 15px, pink 0) top left,

linear-gradient(-135deg, transparent 15px, pink 0) top right,

linear-gradient(-45deg, transparent 15px, pink 0) bottom right,

linear-gradient(45deg, transparent 15px, pink 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

接下来自己尝试下面的图形：

box-sizing: border-box;margin: 10px auto;width: 120px;height: 40px;line-height: 40px;

text-align: center;padding-right: 20px;

background: linear-gradient(-135deg, transparent 14px, pink 0) top right,

linear-gradient(-45deg, transparent 14px, pink 0) bottom right;

background-size: 100% 50%;

background-repeat: no-repeat;