css3如何写渐变色

1、用css3实现图片中的背景色,主义背景色的渐变规定了角度渐变，所以会出现如图的效果，百分比则提现在渐变在整个图片的什么比例出现这种情况

//css
.leve-header{border-radius:10rpx;background:linear-gradient(120deg,#FFD489 0,#DEB36F 50%,#EBBC53 40%);width:calc(100% - 40rpx);height:280rpx;  border-radius:20rpx 20rpx; }

 //html
 <view class="leve-header"></view>

2、线性渐变 - 从上到下（默认情况下）

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

//语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
//下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
#leve-header {
    background-image: linear-gradient(#e66465, #9198e5);
}

3、线性渐变 - 从左到右

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

#leve-header {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}```

4、线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：

#leve-header {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

5、使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。