2020.8.24陈悦玲

颜色渐变

background:linear-gradient(linear ,10% 10%,100% 100%,

color-stop(0.14,rgb(255,0,0)),

color-stop(0.5,rgb(255,255,0)),

color-stop(1,rgb(0,0,255)) );

第一个参数:表示的是渐变的类型linear线性渐变

第二个参数:分别对应x,y方向渐变的起始位置

第三个参数:分别对应x,y方向渐变的终止位置

第四/五/N个参数:设置渐变的位置及颜色

第二种写法:这种写法比较简单,而且效果比较自然

background:linear-gradient(linear, 0 0, 0 100%, from(#2074af), to(#2c91d2));

第一个参数:表示的是渐变的类型

linear线性渐变

第二个参数:分别对应x,y方向渐变的起始位置

第三个参数:分别对应x,y方向渐变的终止位置

第四个参数:设置了起始位置的颜色

第五个参数:设置了终止位置的颜色

<p>从上到下</p>
4     <div style="width: 200px;height: 200px;background: linear-gradient(to bottom,red,blue);"></div>
5     <p>从左到右</p>
6     <div style="width: 200px;height: 200px;background: linear-gradient(to right,red,blue);"></div>
7     <p>对角线(左上到右下)</p>
8     <div style="width: 200px;height: 200px;background: linear-gradient(to bottom right,red,blue)"></div>

标签

评论

this is is footer