借助CSS代码实现几个简单的渐变色的Demo
话不多说先上图： [图片] wxml页面代码： <view class="color">
<view class="linear-gradient color1">1</view>
<view class="linear-gradient color2">2</view>
<view class="linear-gradient color3">3</view>
<view class="linear-gradient color4">4</view>
<view class="linear-gradient color5">5</view>
<view class="linear-gradient color6">6</view>
<view class="linear-gradient color7">7</view>
<view class="linear-gradient color8">8</view>
<view class="linear-gradient color9">9</view>
<view class="linear-gradient color10">10</view>
</view>
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%);
}
