白色优惠券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;
}
粉色优惠券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;
使用radial-gradient实现灰色半圆:
radial-gradient(circle at 0 62rpx, transparent 8rpx, white 12rpx)
径向渐变(圆形 at 原点位置, 透明色 从原点开始的8rpx以内,颜色 从原点开始的12rpx以外)