html图片渐变怎么实现,借助CSS代码实现几个简单的渐变色的Demo

1.以下为示例图1-1

图1-1

2.wxml页面代码：

1

2

3

4

5

6

7

8

9

10

3.wxss模块代码：

.color{

display: flex;

flex-wrap: wrap;

justify-content: space-around;

padding: 5rpx;

color: white;

text-align: center;

font-weight: bold;

}

.linear-gradient{

height: 200rpx;

}

.color1{

width: 48%;

background-image: linear-gradient(45deg, #29bdd9 0%, #276ace 100%);

}

.color2{

width: 48%;

background-image: linear-gradient(45deg, #ff9569 0%, #e92758 100%);

}

.color3{

margin-top: 10rpx;

width: 48%;

background-image: linear-gradient(45deg, #FF416C 0%, #FF4B2B 100%);

}

.color4{

margin-top: 10rpx;

width: 48%;

background-image: linear-gradient(45deg, #8A2387 0%, #E94057 50%, #F27121 100%);

}

.color5{

margin-top: 10rpx;

width: 48%;

background-image: linear-gradient(45deg, #ec008c 0%, #fc6767 100%);

}

.color6{

margin-top: 10rpx;

width: 48%;

background-image: linear-gradient(45deg, #2980B9 0%, #6DD5FA 50%, #FFFFFF 100%);

}

.color7{

margin-top: 10rpx;

width: 48%;

background-image: linear-gradient(45deg, #f12711 0%, #f5af19 100%);

}

.color8{

margin-top: 10rpx;

width: 48%;

background-image: linear-gradient(45deg, #C6FFDD 0%, #FBD786 50%, #f7797d 100%);

}

.color9{

margin-top: 10rpx;

width: 48%;

background-image: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);

}

.color10{

margin-top: 10rpx;

width: 48%;

background-image: linear-gradient(45deg, #12c2e9 0%, #c471ed 50%, #f7797d 100%);

}