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

简介: 没看《css揭秘》之前,我一般就会这样使用liner-gradient(top, #000, #fff)/liner-gradient(45deg, #000, #fff); 我相信很多同事对gradient认知也是到这里,网上普遍也是这样介绍! 正常的情况下:liner-gradient(pink,#fff)在div盒子中是自上而下渐变,如下图: .

没看《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)}
`
screenshot

接下来就是神奇的地方了!在此我再着重推荐一下《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代替,取消颜色渐变

如图所示:(一些其他样式的代码就没写上去了,主要理解上面的三行代码就行了)
screenshot
screenshot

那个箭头长度就是所谓的深度,也就是所谓的三角形斜角边的高!(这个大家默认大家都会的啊)

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

screenshot

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

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

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

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

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

那我们就可以指定 平铺的大小!即通过(backround-size)

screenshot

第一个角:就是左上角 且 平铺的大小是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;

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

screenshot

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

需要购买阿里云各种产品,点击文字链领取阿里云通用打折劵

相关文章
|
2月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
22天前
|
前端开发 UED
CSS3:linear-gradient&input&inset&table
本文介绍了 CSS 中的 `linear-gradient` 渐变、`input` 样式、`inset` 简写属性、`border-collapse: collapse` 表格边框合并以及 `<label>` 元素的 `for` 属性。通过示例代码和解释,帮助读者理解这些 CSS 特性及其应用。
40 13
|
前端开发 程序员
CSS重复线性渐变之画格子
CSS重复线性渐变之画格子
75 0
CSS 03 线性渐变、径向渐变与重复性渐变
linear-gradient( [ || ,]? , [,]* ) < angle >:用角度指定渐变方向或者角度 to left to right to top to bottom <div class='ceng'> </div> .ceng{ width:260px; height:200px; border:1px solid black; background-image:linear-gradient(orange,green); /*从橘红色向绿色渐变,从上到下*/ background-image:linear-g
|
前端开发 JavaScript 程序员
基于H5+css+JavaScript实现动态线性渐变背景
基于H5+css+JavaScript实现动态线性渐变背景
268 0
基于H5+css+JavaScript实现动态线性渐变背景
|
前端开发
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
124 0
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
|
前端开发
CSS:linear-gradient()背景颜色线性渐变
CSS:linear-gradient()背景颜色线性渐变
190 0
CSS3线性渐变
今天来谈谈CSS3中的线性渐变,有了这个,好多以前必须要用图片才能实现的效果如今可能只需简单一行代码就能实现。 首先看看今天的主角: linear-gradient()。
1045 0