CSS 优惠券样式

使用

使用 radial-gradient 径向渐变函数，可以实现一个圆形镂空的样子，在移动端，radial-gradient 的兼容性也是相当完美。

小程序、uni-app、h5可用

直接看样式

横向

.grad1 {
    width: 250px;
    height: 100px;
    background: radial-gradient(circle at right top, transparent 10px,  #28A4F2 0) top left / 60px 51% no-repeat,
      radial-gradient(circle at right bottom, transparent 10px,  #28A4F2 0) bottom left /60px 51% no-repeat,
      radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /190px 51% no-repeat,
      radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /190px 51% no-repeat;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));
}

竖向

.grad2 {
    width: 100px;
    height: 120px;
	background:
                    radial-gradient(circle at left bottom, transparent 10px, #28A4F2 0) top left /60px 30px no-repeat,
                    radial-gradient(circle at right bottom, transparent 10px, #28A4F2 0) top right /60px 30px no-repeat,
                    radial-gradient(circle at left top, transparent 10px, #EFEFF4 0) bottom left /60px 90px no-repeat,
                    radial-gradient(circle at right top, transparent 10px, #EFEFF4 0) bottom right /60px 90px no-repeat;
   filter: drop-shadow(3rpx 3rpx 3rpx rgba(0,0,0,.3));
}

参考 CSS radial-gradient () 函数