线性渐变--跟着李南江学编程

渐变分为线性渐变和径向渐变
线性渐变，从一个方向到另一个方向渐变

image.png

径向渐变，从一指定位置向四周扩散渐变

image.png

一、默认的渐变

1.background: linear-gradient(red,yellow);
默认从上到下渐变

            div{
                width: 200px;
                height: 100px;
                border: 1px solid #000;
                box-sizing: border-box;
                margin: 200px auto;
                background: linear-gradient(red,yellow);                
            }

image.png

注意：
渐变色置至少需要两个以上的颜色

二、调整渐变的方向

1.在渐变颜色前添加 to+方向
to是到的意思，所以to top也就是从下到上

background: linear-gradient(to top,red,yellow);从下至上

image.png

background: linear-gradient(to bottom,red,yellow);从上到下

image.png

background: linear-gradient(to left,red,yellow);从右至左

image.png

background: linear-gradient(to right,red,yellow);从左至右

image.png

三、用角度控制渐变方向

image.png

background: linear-gradient(0deg,red,yellow);

image.png

background: linear-gradient(45deg,red,yellow);

image.png

background: linear-gradient(90deg,red,yellow);

image.png

四、添加具体数值控制渐变范围

在颜色的后面加上数值，可以是 px 或 %

background: linear-gradient(90deg,red 100px,yellow);

            .main{
                width: 200px;
                height: 100px;
                border: 1px solid #000;
                box-sizing: border-box;
                margin: 200px auto;
                background: linear-gradient(90deg,red 100px,yellow);                
            }
            .one{
                width: 100px;
                height: 100px;
                border: 1px solid #000;
                box-sizing: border-box;
            }
            <div class="main">
                  <div class="one"></div>
            </div>     

小框的圈住的是红色的纯色范围为100px，
后面是红色到黄色的渐变范围

image.png

background: linear-gradient(90deg,red 100px,yellow 200px);

            .main{
                width: 400px;
                height: 100px;
                border: 1px solid #000;
                box-sizing: border-box;
                margin: 200px auto;
                background: linear-gradient(90deg,red 100px,yellow 200px);              
            }
            .one,.two{
                width: 100px;
                height: 100px;
                border: 1px solid #000;
                box-sizing: border-box;
                float: left;
            }
              <div class="main">
                  <div class="one"></div>
                  <div class="two"></div>
              </div>

第一个框圈住的是red的纯色范围为100px,
第二个框圈住的是红色到黄色渐变范围，从100px到200px,
200px以后是黄色的纯色范围

image.png

background: linear-gradient(90deg,red 100px,yellow 200px,green 300px);

            .main{
                width: 400px;
                height: 100px;
                border: 1px solid #000;
                box-sizing: border-box;
                margin: 200px auto;
                background: linear-gradient(90deg,red 100px,yellow 200px,green 300px);              
            }
            .one,.two,.three{
                width: 100px;
                height: 100px;
                border: 1px solid #000;
                box-sizing: border-box;
                float: left;
            }

第一个框圈住的是red的纯色范围100px,
第二个框圈住的是红色到黄色渐变的范围，从100px到200px,
第三个框圈住的是黄色到绿色的渐变范围，从200px到300px,
300p以后是绿色的纯色范围

总结：
第一个控制的是纯色范围，后面控制的是渐变范围，我们可以通过以上方法随意控制渐变的方向和范围

我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com