1. El borde del cuadro requerido (botón) es un color degradado
2. La solución
solo necesita usar un elemento de una sola capa y establecer los tres atributos de clip de fondo, origen de fondo e imagen de fondo para él, y establezca dos conjuntos de valores para cada atributo, el primer grupo se usa para establecer el fondo monocromático dentro del borde y el segundo grupo se usa para establecer el color degradado en el borde.
<view class="buttons">
<view class="btnA">重置</view>
<view class="btnB">完成</view>
</view>
.buttons {
width: 100%;
display: flex;
justify-content: space-between;
.btnA {
width: 318rpx;
height: 90rpx;
color: #21C0D5;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
border-radius: 45rpx;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #FFFFFF, #FFFFFF), linear-gradient(90deg, #63B2ED, #12C3D0);
}
.btnB{
width: 318rpx;
height: 90rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
border-radius: 45rpx;
background: linear-gradient(136deg, #63B2ED 0%, #12C3D0 100%);
}
}