§ ITPOW >> 文档 >> CSS

有趣的 CSS 3-渐变

作者:vkvi 来源:ITPOW(原创) 日期:2017-12-25

普通线性渐变

background: linear-gradient(to right, #f00, #0f0);

有趣的 CSS 3-渐变

自定义角度渐变

background: linear-gradient(135deg, #f00, #0f0);

自定义角度渐变

渐变位置

前面讲了 3 个参数:

  • 第 1 个参数是方向,也有省略的情况,但是为了兼容性,建议写上。

  • 第 2、3 个参数是颜色(实际上再写更多颜色都可以),默认情况下是均分的:也就是说第 1 个颜色位于 0%,第 2 个颜色位于 100%,中间平滑渐变。如果有 3 个颜色则是:0%、50%、100% 处是对应的颜色,中间平滑渐变。如果有 4 个颜色则是:0%、33.33%、66.67%、100% 处是对应的颜色,中间平滑渐变。如果有 5 个颜色则是:0%、25%、50%、75%、100% 处是对应的颜色,中间平滑渐变……

如果我们在颜色后面跟上一个位置,就是我们自定义了,如下:

background: linear-gradient(to right, #f00 100px, #0f0);

因为上面提到了 100px,所以我们说明一下,我们这个区块尺寸是:200px * 50px,效果如下:

指定位置颜色

与本文第一个示例相比,多了一个 100px,第 2 个颜色没有指定位置,但是根据前面的规则,我们知道其实是等效于 100%。

那么这个意思就是:

  • 100px#f00100%#0f0中间平滑渐变

  • 0 - 100px 处用什么颜色呢?答案是:#f00

渐变偏移

前面一直在说“平滑渐变”,这个就是,中间部分,大家“势均力敌”,其实我们还可以通过技巧,使这个“渐变”不那么“平滑”,而是偏向于某一方。

background: linear-gradient(to right, #f00, 70%, #0f0);

渐变中心点

中间指定了一个 70%,这就是说左边有 70% 的“力量”,右边有 30% 的“力量”。故红色的明显多些。

这里提到的“渐变位置”、“渐变偏移”,搞过 Photoshop 的,一下就理解了。

通过位置,指定颜色为纯色

前面调了渐变的起止位置,进一步限定,我们可以指定为纯色。也就是说我们把第 1、2 个颜色的位置,指定在同一个位置,他们没有“中间”,就没有平滑渐变了。

background: linear-gradient(90deg, #f00 100px, #0f0 100px);
background: linear-gradient(135deg, #f00 100px, #0f0 100px);
background: linear-gradient(135deg, #f00 50%, #0f0 50%);
background: linear-gradient(135deg, #f00 10%, #0f0 10%);

指定位置颜色

指定位置颜色

角度加50%

角度加10%

那个横着的都好理解,那个斜着的,其 100px 到底从哪算呢?我们把中心点标出来,可以看出,红色的,要多一些,如下图:

中心点

首先,出现这种偏差正常,因为我们不是用的 50%,而是 100px,所以肯定不是在中心点。

其次,那么这个 100px 到底从哪算起?是这样:从左上角,引出一根 135 度的线(135 度指与 12点钟方向的夹角),这根线长 100px与该线垂直的线,就是“分水岭”。

再看斜着的,50%,这可是在中心点。

角度加50%

那个斜着的,10%,就让人不好理解了,看下面这图:

偏移原理

 从中心偏移 135 度,然后 2 端点引出 2 条线与之垂直,形成 2 个蓝色的点,这就是总长度,10% 就是这个总长度的 10%,然后作垂线……

我们看了这个说法,其实发现与前面 135度 +100px 那个说法其实本质是一样的

位置段

background: linear-gradient(to right, #f00 100px, #0f0 100px 150px, #00f 150px);

如上,我们指定了 3 个颜色,中间那个颜色指定了颜色范围为 100px 到 150px。效果如下:

位置段

多个背景

前面都是一外背景,咱们看看多个背景混合的:

width:200px; height:200px;
background: linear-gradient(0deg, red, transparent 70%),
            linear-gradient(120deg, green, transparent 70%),
            linear-gradient(240deg, blue, transparent 70%);

从多个角度混合了 3 个背景,关键点是终点是透明的,这样三者才能都显现,否则光显示第一个背景了。

3个背景

相关文章