玩坏css3之linear

  • 时间:
  • 浏览:1

background-size: 1000% 1000%;(这行代码也很糙要,为下面的样式做铺垫,这种代码不清楚的赶紧去w3c看)

谢谢大伙儿 ,获取更多精华技术IT资讯,请持续关注云栖社区“达摩老祖”and"码上有钱"

这麼 们就还都能不能 指定 平铺的大小!即通过(backround-size)

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

我相信什么都有同事对gradient认知也是到这里,网上普遍也是这麼 介绍!

第一一个角:因此左上角 且 平铺的大小是1/4的div大小,这麼大小水平和竖直方向因此各1000%,

首先大伙儿 都能理解:

第一一个角平铺:

有但是大伙儿 前要这麼 的样式:

接下来个人尝试下面的图形:

background-size(1000% , 1000%)

第一一个角平铺:

第一一个参数: 因此渐变颜色,由于(#20B2AA 0)上方不加0说说,默认情况汇报下从#20B2AA渐变到#ffffff,什么都有用0代替,撤销颜色渐变

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

第八个角平铺:

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

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

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

`

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

`

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

接下来因此神奇的地方了!在此我再着重推荐一下《css揭秘》[LEA VEROU著],大伙儿 还都能不能 看看

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

第八个角平铺:

总和代码:

第一一个参数:线性渐变方向,

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

如图所示:(有些有些样式的代码就没写上去了,主要理解上方的三行代码就行了)



background-repeat: no-repeat

转载或引用本网版权所有之内容须注明“转自(或引自)云栖社区”字样,并标明本网网址yq.aliyun.com

大伙儿 都知道,再为什么会么会颜色渐变都会平铺过来的

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

那个箭头长度因此所谓的高度,也因此所谓的三角形斜角边的高!(这种大伙儿 默认大伙儿 都会的啊)

同理:有些一一个角平铺的大小都会一样的。即

第八个参数:切角高度,(等下看展示效果再解析)