微信小程序css之线性渐变

线性渐变

注意是设置背景图片

wxml:

<!--index.wxml-->
<view class="container">
  <view class="linear-gradient">线性渐变</view>
</view>

wxss:

.linear-gradient{
  width:400rpx;
  height:300rpx;
  background-image: linear-gradient(red,orange,yellow,green,cyan,blue,purple);
}

效果图：

径向渐变

radial-gradient:shape size @position,color1,color2 ,…

• shape 形状 circle|ellipse
• size 大小 farthest-corner|farthest-side|closest-corner|closest-side
• @position @ 10px 10px | @10% 10%
• color #FFFFFF|rgba(255,255,255,0.5)

wxml:

<!--index.wxml-->
<view class="container">
  <view class="radial-gradient">径向渐变</view>
</view>

wxss:

.radial-gradient{
  width:200rpx;
  height:200rpx;
  background-image: radial-gradient(ellipse farthest-side at 50% 50%, red, yellow, black);
}