入坑线性渐变linear-gradient

gekylin 发布于2019-08-29 11:24 / 3122人阅读

摘要：线性渐变的表达式看到线性渐变的表达式，又要开始用脑了，分拆开来其实很好理解。结果为线性渐变中的角度默认是从下到上的垂直方向开始顺时针进行旋转的。

线性渐变linear-gradient的表达式：
linear-gradient( [ | ,]? [, ]+);

看到线性渐变的表达式，又要开始用脑了，分拆开来其实很好理解。
先从几个实际的表达式讲起：

background-image:linear-gradient(#62C292 0%,#F8CBAD 100%);
background-image:linear-gradient(0deg,#62C292 0%,#F8CBAD 100%);    
background-image:linear-gradient(top,#62C292 0px,#F8CBAD 100px);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 50%,#62C292 100%);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 25%,#62C292 50%,#F8CBAD 75%,#62C292 100%);

按上面来理解——
background-image:linear-gradient([角度或边角,]x(0or1)+(颜色+空格+长度或百分比)+[(,颜色+空格+长度或百分比)xn(n>=1)]);

[角度或边角,]*(0or1)
指

[|,]?

(颜色+空格+长度或百分比)
指

[(,颜色+空格+长度或百分比)*n(n>=1)]
指

[, ]+

我给出的表达式里头的“+”理解成字符串之间的合并就可以了

不知道有没有将大家绕晕，从一开始我就是这样理解的。换一种简单暴力点的——

“|”指“或（即or）”

“?”指“0或1”

“+”指“1个以上”

还是从实际案例中来深入理解，下面的测试结果都是基于firefox38.0

一、认识线性渐变的角度

HTML中的body部分——


  0deg

依次将里头的“0deg”替换成“45deg”、“90deg”、“135deg”、“180deg”。
结果为——

线性渐变中的角度默认是从下到上的垂直方向开始顺时针进行旋转的。

二、两个以上的渐变颜色和扰人的

先看一个多个渐变颜色的实例。

上图是从左到右的水平渐变方向，知道了渐变的总长度和起始点，就能一一确定的位置（由长度或百分比来决定），结合对应位置上的颜色就可以知道上一个和下一个是如何发生颜色渐变的了。

水平和垂直方向的总长度直观上很好理解，无疑是区块背景的宽度或者是高度。如果是非水平和垂直的渐变角度，该如何确定渐变的总长度呢？通过下图来理解。

如图所示，渐变的起点和终点在过中心的渐变线的垂直线上，给出一个区块和渐变方向，就能够确定渐变的起始点和总长度了，这样有n个，就可以划分n-1个渐变区域了。
实例：
HTML中的body部分——

三、总结

其实linear-gradient并不坑，理解了原理分分钟玩转渐变。

GPU云服务器云服务器入坑篇小入坑入坑到放入坑指北

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111623.html

入坑线性渐变linear-gradient

摘要：线性渐变的表达式看到线性渐变的表达式，又要开始用脑了，分拆开来其实很好理解。结果为线性渐变中的角度默认是从下到上的垂直方向开始顺时针进行旋转的。线性渐变linear-gradient的表达式：linear-gradient( [ | ,]? [, ]+); 看到线性渐变的表达式，又要开始用脑了，分拆开来其实很好理解。先从几个实际的表达式讲起： background-image:li...

Corwien 2019-08-01 15:49 评论0 收藏0
CSS3-线性渐变

摘要：兼容性见参考二线性渐变渐变线通过函数可以创建线性渐变图片。线性渐变是通过一个轴定义的，这个轴称为渐变线。等价等价等价等价等价等价等价等价并且和直接距离为，不会渐变，如下图参考线性渐变一、渐变（gradient） 1.1 关于渐变渐变表示从一种颜色平滑的过度到另一种颜色。它是图片类型的一种，但是渐变类型图片没有尺寸，也没有长宽比。它的尺寸取决于被应用的场景，比如作为元素的背景图片时，...

piglei 2019-08-30 14:24 评论0 收藏0
浅探css3渐变

摘要：基本用法想要知道线性渐变有什么用，当然要先学习它的属性和用法。下面我们先一起学习一下线性渐变的属性。函数的第一个参数是角度或者方向，第二个参数是截止颜色的值，要想产生渐变的效果，当然至少要两个或者两个以上的颜色值。 css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要...

lieeps 2019-08-29 17:17 评论0 收藏0
CSS3 线性渐变应用

摘要：分为线性渐变和径向渐变。而我们今天主要是通过一个小例子来针对线性渐变来剖析其具体的用法。今天的例子就是用的线性渐变制作一个大致的针孔注射器。第一个参数表示线性渐变的方向，是从上到下是从左到右，如果定义成，那就是从左上角到右下角。 CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是通过一个小例子来针...

Snailclimb 2019-08-30 13:05 评论0 收藏0
css3 渐变

摘要：渐变渐变分为两种渐变，一种是线性渐变，一种是径向渐变线性渐变线性渐变为向上，向下，向左，向右两种渐变方式。线性渐变由一个轴即梯度线构成。 css3ps: css越来越真正的像一门语言了，css已经有变量了，刚刚看到文档中。一个实验性质的功能。渐变渐变分为两种渐变，一种是线性渐变，一种是径向渐变线性渐变线性渐变为向上，向下，向左，向右两种渐变方式。 linear-gradient...

FrozenMap 2019-08-29 16:20 评论0 收藏0