效果如下：
样式一：
<template> <div class="couponMain"><div>样式一</div><div class="coupon1">左半圆效果</div><div class="coupon2">左右半圆效果</div><div class="coupon3">左内圆</div><div class="coupon4">四角收缩</div><div class="coupon5">六角收缩</div><div class="coupon6">凹边</div><div class="coupon7">中排圆点</div><div class="coupon8">两边凹陷</div></div>
</template><style lang="scss" scoped>
.coupon1 {width: 240px;height: 100px;margin-top: 15px;background-color: #f56c6c;-webkit-mask: radial-gradient(circle at left center,transparent 20px,red 20px);
}
.coupon2 {width: 240px;height: 100px;margin-top: 15px;background-color: #f56c6c;-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0),radial-gradient(circle at right, #0000 20px, red 0);-webkit-mask-size: 51%;-webkit-mask-position: 0, 100%;-webkit-mask-repeat: no-repeat;
}
.coupon3 {width: 240px;height: 100px;margin-top: 15px;background-color: #f56c6c;-webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0);
}
.coupon4 {width: 240px;height: 100px;margin-top: 15px;background-color: #f56c6c;-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0);-webkit-mask-position: -20px -20px;
}
// 缩写
// .coupon4 {
// -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px;
// }
.coupon5 {width: 240px;height: 100px;margin-top: 15px;background-color: #f56c6c;-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0);-webkit-mask-position: -20px -20px;-webkit-mask-size: 50%;
}
// 缩写
// .coupon5 {
// -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
// }
.coupon6 {width: 240px;height: 100px;margin-top: 15px;background-color: #f56c6c;-webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0);-webkit-mask-position: -10px;-webkit-mask-size: 100% 30px;
}
.coupon7 {width: 240px;height: 100px;margin-top: 15px;background-color: #f56c6c;-webkit-mask: radial-gradient(circle at 50%, red 5px, #0000 0) 50% 50% / 100%20px,radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;-webkit-mask-composite: destination-out;mask-composite: subtract; /*Firefox*/
}
.coupon8 {width: 240px;height: 100px;margin-top: 15px;background-color: #f56c6c;-webkit-mask: radial-gradient(circle at 5px, red 5px, #0000 0) -5px 50% / 100%20px,radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;-webkit-mask-composite: destination-out;mask-composite: subtract; /*Firefox*/
}
</style>
样式二：
<template>
<div class="stampMain"><div>样式二</div><div class="stamp stamp01"><div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div><div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div><i></i></div><div class="stamp stamp02"><div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div><div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div><i></i></div><div class="stamp stamp03"><div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div><div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div><i></i></div><div class="stamp stamp04"><div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div><div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div><i></i></div></div>
</template><style lang="scss" scoped>
.stampMain {display: flex;justify-content: space-around;margin-right: 50px;flex-wrap: wrap;margin-top: 50px;
}
.stamp {width: 387px;height: 140px;padding: 0 10px;position: relative;overflow: hidden;
}
.stamp:before {content: '';position: absolute;top: 0;bottom: 0;left: 10px;right: 10px;z-index: -1;
}
.stamp:after {content: '';position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);z-index: -2;
}
.stamp i {position: absolute;left: 20%;top: 45px;height: 190px;width: 390px;background-color: rgba(255, 255, 255, 0.15);transform: rotate(-30deg);
}
.stamp .par {float: left;padding: 16px 15px;width: 220px;border-right: 2px dashed rgba(255, 255, 255, 0.3);text-align: left;
}
.stamp .par p {color: #fff;
}
.stamp .par span {font-size: 50px;color: #fff;margin-right: 5px;
}
.stamp .par .sign {font-size: 34px;
}
.stamp .par sub {position: relative;top: -5px;color: rgba(255, 255, 255, 0.8);
}
.stamp .copy {display: inline-block;padding: 21px 14px;width: 100px;vertical-align: text-bottom;font-size: 30px;color: rgb(255, 255, 255);
}
.stamp .copy p {font-size: 16px;margin-top: 15px;
}
.stamp01 {background: #f39b00;background: radial-gradient(rgba(0, 0, 0, 0) 0,rgba(0, 0, 0, 0) 5px,#f39b00 5px);background-size: 15px 15px;background-position: 9px 3px;
}
.stamp01:before {background-color: #f39b00;
}
.stamp02 {background: #d24161;background: radial-gradient(transparent 0, transparent 5px, #d24161 5px);background-size: 15px 15px;background-position: 9px 3px;
}
.stamp02:before {background-color: #d24161;
}
.stamp03 {background: #7eab1e;background: radial-gradient(transparent 0, transparent 5px, #7eab1e 5px);background-size: 15px 15px;background-position: 9px 3px;
}
.stamp03:before {background-color: #7eab1e;
}
.stamp03 .copy {padding: 10px 6px 10px 12px;font-size: 24px;
}
.stamp03 .copy p {font-size: 14px;margin-top: 5px;margin-bottom: 8px;
}
.stamp03 .copy a {background-color: #fff;color: #333;font-size: 14px;text-decoration: none;padding: 5px 10px;border-radius: 3px;display: block;
}
.stamp04 {margin-top: 10px;width: 390px;background: #50add3;background: radial-gradient(rgba(0, 0, 0, 0) 0,rgba(0, 0, 0, 0) 4px,#50add3 4px);background-size: 12px 8px;background-position: -5px 10px;
}
.stamp04:before {background-color: #50add3;left: 5px;right: 5px;
}
.stamp04 .copy {padding: 10px 6px 10px 12px;font-size: 24px;
}
.stamp04 .copy p {font-size: 14px;margin-top: 5px;margin-bottom: 8px;
}
.stamp04 .copy a {background-color: #fff;color: #333;font-size: 14px;text-decoration: none;padding: 5px 10px;border-radius: 3px;display: block;
}
</style>
样式三：
<template><div class="list"><div>样式三</div><div class="item"><div class="left"><div class="block"><el-row><el-col :span="11"><p class="first"><span>￥</span><span>50元</span></p><p class="second"><span>满100可用</span></p></el-col><el-col :span="13"><p class="third"><span>美食优惠券</span></p><p class="fourth"><span>有效期：2019.10.2020.10.22</span></p></el-col></el-row></div></div><div class="right"><p>立即领取</p></div></div></div>
</template><style lang="scss" scoped>
.list {background: #eeeeee;width: 100%;.item {overflow: hidden;margin: 10px 20px;.left {float: left;}.left {position: relative;width: 500px;height: 190px;background-image: radial-gradient(circle at 1px 8px,transparent 6px,#fff 6px,#fff 0px);background-size: 500px 18px;background-position: 0 0, 500px 0;background-repeat-x: no-repeat;.block {margin: 15px;.first,.third {padding: 20px 20px;}.second,.fourth {padding: 10px 20px;color: #888;}.first {color: #f60d0b;span:nth-child(1) {font-size: 30px;}span:nth-child(2) {font-size: 48px;}}.third {color: #000;font-size: 36px;}}}.right {position: relative;width: 200px;height: 190px;background-image: radial-gradient(circle at 199px 8px,transparent 6px,#409eff 6px,#409eff 0px);background-size: 200px 18px;background-repeat-x: no-repeat;margin-left: 500px;p {width: 100px;height: 100%;margin: 0 auto;color: #fff;line-height: 100px;text-align: center;font-size: 44px;}}}
}</style>
样式四：
<template> <div class="theme1Main"><div>样式四</div><div class="coupon theme1"><!-- 1、优惠券金额和过期时间 --><div class="price"> 100元 <span>优惠券</span><p class="timeout">2020-12-31 18:18:18过期</p></div> <!-- 2、优惠券描述 --><div class="describe"><p>1、商城、美食可用</p><p>2、过期作废</p></div> <!-- 3、按钮 --><div class="btns"> <button>立即使用</button> </div></div><div class="coupon theme2"><!-- 1、优惠券金额和过期时间 --><div class="price"> 100元 <span>优惠券</span><p class="timeout">2020-12-31 18:18:18过期</p></div> <!-- 2、优惠券描述 --><div class="describe"><p>1、商城、美食可用</p><p>2、过期作废</p></div> <!-- 3、按钮 --><div class="btns"> <button>立即使用</button> </div></div></div>
</template><style lang="scss" scoped>
.theme1Main{display: flex;width: 100%;
padding: 10px;
}
.theme1{--main-color: #ec407a;--f-color: #444;
}
.theme2{
--main-color: #039BE5; --f-color: #fff;
}
.coupon {background-color: #e0e0e0;width: 200px; /* css变量 */
margin-left: 10px;
}.price {position: relative;height: 120px;background-image: radial-gradient(circle at 100px -8px,#fff 20px,var(--main-color) 21px);color: #fff;font-size: 20px;text-align: center;padding-top: 40px;
}
.price .timeout {color: var(--f-color);font-size: 14px;margin-top: 25px;
}
.price span {font-size: 14px;
}
//锯齿状1
.price::after{ position: absolute; content: ''; display: block; bottom: 0px; height: 10px; width: 100%; background-size: 11px 200px; background-image: radial-gradient( circle at 5px 10px, #E0E0E0 6px, var(--main-color) 7px);}
//锯齿状样式2
// .price::after{ position: absolute; content: ''; display: block; bottom: -5px; width: 100%; border-bottom: 10px dotted #E0E0E0;}.describe{ color: #333; padding: 10px; font-size: 14px;}.btns { /* 使其button可以居中 */ text-align: center;}.btns button{ /* 重置按钮样式 */ border: none; box-shadow: none; outline: none; background-color: var(--main-color); color: #fff; width: 50%; border-radius: 20px; line-height: 30px; margin: 40px 0 20px; cursor: pointer;}
</style>
CSS3 径向渐变和线性渐变是很相似的，首先来看其语法：
-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
除了你已经在线性渐变中看到的起始位置，方向和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。颜色起止(Color stops)：就像用线性渐变，你应该沿着渐变线定义渐变的起止颜色。
做优惠券最主要的代码如下，就是这三句
background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);
background-size: 15px 15px;
background-position: 9px 3px;
