css实现优惠券镂空样式

一般优惠券使用最多

效果图如下：

代码如下：因为我是小程序所以是<view/>标签，自行更换

 

 

 说明：

　　1.重点就是priceShow是镂空的主要代码

　　2.acea-row就相当于display:flex;flex-direction: row;

 css样式来了

 

 

 可复制的代码：

.priceShow {
height: 100rpx;
width: 170rpx;
-webkit-mask: radial-gradient(circle at 0, #0000 15rpx, red 0), radial-gradient(circle at right, #0000 15rpx, red 0);
-webkit-mask-size: 51%;
-webkit-mask-position: 0, 100%;
-webkit-mask-repeat: no-repeat;
background: linear-gradient(-17deg, #E18344, #ECA676);
justify-content: center;
align-items: center;
color: #ffffff;
}

二、

 

 css代码：

-webkit-mask: radial-gradient(circle at 20rpx 20rpx, #0000 20rpx, red 0) -20rpx -20rpx