微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients

左手的ㄟ右手 2024-02-19 16:16 31阅读 0赞

### 线性渐变Linear Gradients ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
通用语法  
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。  
线性渐变的实例：  
![在这里插入图片描述][20190122153055743.png]  
语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认情况下）  
下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></title> 
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 从上到下</h3>
    	
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
    <div id="grad1"></div>
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    </body>
    </html>

效果图  
![微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients][CSS3_-_Gradients-_Linear Gradients]

### 线性渐变 - 从左到右 ###

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></title> 
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 从左到右</h3>
    <p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
    
    <div id="grad1"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    </body>
    </html>

效果图  
![微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients][CSS3_-_Gradients-_Linear Gradients 1]

### 线性渐变 - 对角 ###

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。  
下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></title> 
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 对角</h3>
    <p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
    
    <div id="grad1"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    </body>
    </html>

效果图  
![微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients][CSS3_-_Gradients-_Linear Gradients 2]

### 小程序应用 ###

> Wxml代码

> Wxss代码

.c1{
      margin: 10px;
      padding: 20px;
      background: linear-gradient( red,blue);
    }
    .c2{
      margin: 10px;
      padding: 20px;
      background: linear-gradient(to right, red , blue);
    }
    
    .c3{
      margin: 10px;
      padding: 20px;
      background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
    }

效果图  
![微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients][CSS3_-_Gradients-_Linear Gradients 3]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程][-_CSS3]  
![微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients][CSS3_-_Gradients-_Linear Gradients 4]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190122153055743.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/aafa7fd615964a43b125b29679381458.png
[CSS3_-_Gradients-_Linear Gradients]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2857ce333fd44a8a931212d85a5c211b.png
[CSS3_-_Gradients-_Linear Gradients 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/db906a7cad3147a38bb2c6e65226ec15.png
[CSS3_-_Gradients-_Linear Gradients 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e34c019997444b41b13be5ef0627a1b9.png
[CSS3_-_Gradients-_Linear Gradients 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7884f9e93d2b4a1284b3d4af65fb4d9d.png
[-_CSS3]: https://edu.csdn.net/course/detail/12851
[CSS3_-_Gradients-_Linear Gradients 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9a9ceb194c41446fa3a9ea09659b6517.png