当前位置: 首页 > Web前端 > HTML

入坑线性渐变linear-gradient

时间:2023-04-02 16:51:13 HTML

线性渐变linear-gradient的表达式:linear-gradient([|,]?[,]+);看到线性渐变的表情,又得开动脑筋了。分开来其实很好理解。让我们从几个实际的表达式开始:background-image:linear-gradient(#62C2920%,#F8CBAD100%);background-image:linear-gradient(0deg,#62C2920%,#F8CBAD100%);背景图像:线性渐变(顶部,#62C2920px,#F8CBAD100px);背景图像:线性渐变(90deg,#62C2920%,#F8C29250%,#62C292100%);背景图像:线性-梯度(90度,#62C2920%,#F8CBAD25%,#62C29250%,#F8CBAD75%,#62C292100%);根据上面的理解-background-image:linear-gradient([angleoredgeangle,]x(0or1)+(color+space+lengthorpercentage)+[(,color+space+lengthorpercentage)xn(n>=1)]);[angleorcorner,]*(0or1)指的是[|,]?(color+space+lengthorpercentage)指的是[(,color+space+lengthorpercentage)*n(n>=1)]指的是[,]+的"+"在我给出的表达式中可以理解为字符串的组合。.对于简单的暴力点——“|”意思是“或(或)”“?”表示“0或1”,“+”表示“大于1”结果均基于firefox38.01.认识线性渐变的角度HTML中的body部分——0deg

将里面的“0deg”换成“45deg”,依次为“90deg”、“135deg”、“180deg”。结果是——线性渐变中的角度默认从底部顺时针旋转到垂直方向。二、两种以上的渐变色和令人不安的首先看一个多重渐变色的例子。上图显示了水平渐变的方向从左到右。知道了渐变的总长度和起点,就可以一个一个地确定的位置(由长度或百分比决定),并在相应的位置组合颜色。可以知道上一个和下一个的颜色渐变是怎么发生的。水平和垂直方向的总长度直观易懂,无疑是块背景的宽度或高度。如果是非水平和垂直的渐变角度,如何确定渐变的总长度?通过下图理解。如图所示,渐变的起点和终点都在通过中心的渐变线的垂线上。给定一个块和渐变方向,可以确定渐变的起点和总长度,这样就有n个,可以划分n-1个渐变区域。示例:HTML中的正文部分——
3.总结其实linear-gradient不是坑,搞懂原理分分钟玩转gradient。