【小程序】【css】优惠券样式详解_微信小程序优惠券列表领取样式

白色优惠券css

优惠券实际分为左中右三个部分

.my_item{
  width: 674rpx;
  height: 246rpx;
  background-repeat: no-repeat;
  margin: 0 auto;
  margin-bottom: 14rpx;
  box-shadow: 0 0 5rpx 5rpx rgba(0, 0, 0, .05);
  background: radial-gradient(circle at 0 62rpx, transparent 8rpx, white 12rpx), 
  			  linear-gradient(0.25turn, white, white), //中间区域的线性渐变颜色
  			  radial-gradient(circle at 36rpx 62rpx, transparent 8rpx, white 12rpx);
  //三个区域的宽高
  background-size: 38rpx 255rpx,603rpx 255rpx,34rpx 255rpx;
  //三个区域的定位
  background-position: 0rpx 0px,38rpx 0px,638rpx 0px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

粉色优惠券css

粉色优惠券实际分为四个部分

.coupon_item {
    width: 701rpx;
    height: 162rpx;
    background-repeat: no-repeat;
    margin: 0 auto;
    display: flex;
    align-items: center;
    margin-bottom: 17rpx;
    color: white;
    //顺序为红粉黄蓝
    background: linear-gradient(0.25turn, #FD4C66, #FC4C87), 
    			radial-gradient(circle at 22rpx 8rpx, transparent 12rpx, #FC4C87 12rpx) top left,
    			radial-gradient(circle at 10px 112rpx, transparent 12rpx, #FC4C87 12rpx) bottom left, 
    			linear-gradient(0.25turn, #FC4C87, #FD4C66);
    background-size: 490rpx 162rpx, 70rpx 116rpx, 46rpx 110rpx, 168rpx 162rpx; 
    background-position: 0px 0px,488rpx -8rpx, 488rpx 52rpx, 528rpx 0px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用radial-gradient实现灰色半圆：

radial-gradient(circle at 0 62rpx, transparent 8rpx, white 12rpx)
径向渐变(圆形 at 原点位置, 透明色 从原点开始的8rpx以内,颜色 从原点开始的12rpx以外)