css优惠券圆角内凹样式
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
css优惠券圆⾓内凹样式background: radial-gradient(circle at bottom right, #FFFFFF 0, #FFFFFF 0) bottom right
例⼦：（上下两部分，中间有虚线和内凹圆⾓）
<!--index.wxml-->
<view class="container">
<view class="top"></view>
<view class="bottom"></view>
</view>
<!--index.wxss-->
.container{
background: skyblue;
}
.top{
height: 205rpx;
width: 100%;
background-color: skyblue;
background: radial-gradient(circle at bottom right, transparent 15rpx, #FFFFFF 0) bottom right,
radial-gradient(circle at bottom left, transparent 15rpx, #FFFFFF 0) bottom left,
radial-gradient(circle at top left, #FFFFFF 15rpx, #FFFFFF 0) top left,
radial-gradient(circle at top right, #FFFFFF 15rpx, #FFFFFF 0) top right;
background-size: 54% 54%;
background-repeat: no-repeat;
position: relative;
}
.top::after{
position: absolute;
content: '';
width: 676rpx;
height:0rpx;
background-color: skyblue;
border: 1rpx dashed #B7BBC0;
left: 22rpx;
z-index: 1;
bottom: 0;
}
.bottom{
display: flex;
align-items: center;
width: 100%;
height: 206rpx;
background-color: skyblue;
position: relative;
background: radial-gradient(circle at bottom right, #FFFFFF 0, #FFFFFF 0) bottom right,
radial-gradient(circle at bottom left, #FFFFFF 0, #FFFFFF 0) bottom left,
radial-gradient(circle at top left, transparent 15rpx, #FFFFFF 0) top left,
radial-gradient(circle at top right, transparent 15rpx, #FFFFFF 0) top right;
background-size: 60% 60%;
background-repeat: no-repeat;
}。