摘要:线性渐变的表达式看到线性渐变的表达式,又要开始用脑了,分拆开来其实很好理解。结果为线性渐变中的角度默认是从下到上的垂直方向开始顺时针进行旋转的。
线性渐变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个
实例:
HTML中的body部分——
三、总结
其实linear-gradient并不坑,理解了原理分分钟玩转渐变。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50132.html
摘要:线性渐变的表达式看到线性渐变的表达式,又要开始用脑了,分拆开来其实很好理解。结果为线性渐变中的角度默认是从下到上的垂直方向开始顺时针进行旋转的。 线性渐变linear-gradient的表达式:linear-gradient( [ | ,]? [, ]+); 看到线性渐变的表达式,又要开始用脑了,分拆开来其实很好理解。先从几个实际的表达式讲起: background-image:li...
摘要:分为线性渐变和径向渐变。而我们今天主要是通过一个小例子来针对线性渐变来剖析其具体的用法。今天的例子就是用的线性渐变制作一个大致的针孔注射器。第一个参数表示线性渐变的方向,是从上到下是从左到右,如果定义成,那就是从左上角到右下角。 CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是通过一个小例子来针...
阅读 2471·2023-04-25 18:13
阅读 712·2021-11-22 12:10
阅读 2938·2021-11-22 11:57
阅读 2083·2021-11-19 11:26
阅读 2076·2021-09-22 15:40
阅读 1364·2021-09-03 10:28
阅读 2613·2019-08-30 15:53
阅读 1846·2019-08-30 15:44