没看《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"码上有钱"