387
技术社区[云栖]
玩坏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;
转载或引用本网版权所有之内容须注明“转自（或引自）云栖社区”字样，并标明本网网址yq.aliyun.com
谢谢大家，获取更多精华技术IT资讯，请持续关注云栖社区“达摩老祖”and"码上有钱"
需要购买阿里云各种产品，点击文字链领取阿里云通用打折劵
最后更新：2017-07-20 23:04:22