玩坏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"码上有钱" 需要购买阿里云各种产品，点击文字链领取阿里云通用打折劵
