手写react优惠券组件

效果如下：开头解释一下，最后画一个圆点边框，然后平移边框，使边框的一部分覆盖原来的边框，使用与背景颜色相同的圆点颜色来创建锯齿效果。如果不平移边框，效果如下：.sawtooth:before{/*dottedborder*/border-right:10pxdottedwhite;/*按半径偏移，使一半的点覆盖div*/left:0;}.sawtooth:after{/*点形边框*/border-left:10pxdottedwhite;/*偏移一个半径，让一半的圆点覆盖div*/right:0px;}看上图就明白原理是不是很明显了。但是这样也有一些缺点：1.锯齿的颜色必须和背景颜色一样2.锯齿向内画的方式是不行的方法2radial-gradient设置背景radial-gradient解释了如何创建图像具有径向渐变。简单语法：radial-gradient(circle,red10px,blue20px,yellow30px);形状为圆形（或椭圆形），开始颜色为红色，中间颜色为蓝色，最后颜色为黄色。10px表示距离圆心10px的范围为红色；20px表示距离圆心20px的位置是蓝色，然后向两边扩散，直到里面10px的红色区域，向外30px的黄色区域；30px表示从30px向外的一切都是黄色的。.div{边距：20px;高度：100px；宽度：100px；background-image:radial-gradient(circle,red10px,blue20px,yellow30px)}使用radial-gradient绘制圆点并将背景圆的中心设置为透明到overcolor两者都设置为锯齿状颜色设置的颜色背景图片通过backgroundsize属性，然后repeat.div{margin:20px;高度：106px；宽度：140px；背景图像：径向渐变（圆形在中心，透明6px，#28ACFF7px）；background-size:20px15px;}这样一个虚线背景的div就出来了。然后通过设置宽度，只显示半个圆，左边的锯齿就出来了。宽度设置为10px，如下所示。上槽的实现比较简单。通过绝对定位，用一个圆形元素覆盖父元素的边框。问题：子元素不能覆盖父元素。实现中遇到的一个问题是子元素移过去了，但是不能盖住父元素的边框。这时候就需要在组件外面再放一层div，把这个div设置为相对定位，然后把圆形div设置为相对定义，然后移动位置覆盖组件div里面。开发优惠券通过上面的讲解，把实现优惠券所需要的知识点都讲解完了。让我们实现具有初始效果的优惠券。结构解析一个div顶层容器，设置为相对定位。（解决无法覆盖的问题）一个div组件容器，放在上面div锯齿状div（div放在2）加粗div显示折扣（div放在2）虚线div（div放在2div）折扣detailsdiv(divplacedin2)两个圆形div，你可以把div放在1或2中。code.parentContainer{位置：相对；边距：20px；溢出：隐藏；}.container{显示：flex；边框：1px实心#ddd；边界半径：3px；宽度：300px；高度：105px；border-left:0;}.left{width:10px;高度：106px；左：-1px；边框：0px实心#ddd；边界半径：3px；背景图像：径向渐变（中心圆圈，透明6px，#28ACFF4px）；背景大小：20px15px；z-index:1}.couponName{text-align:center;边框：0px纯红色；行高：106px；字体大小：40px；字体系列：PingFangSC-Medium；字体粗细：500；颜色：RGBA（40,172,255,1）；左边距：20px；margin-right:16px;}.subName{font-size:20px;}.topSemicircle{width:20px;高度：20px；边框：1px实心#ddd；边框半径：10px；位置：绝对；左：80px；顶部：-16px；填充：0；背景颜色：#fff;}.bottomSemicircle{宽度：20px;高度：20px；边框：1px实心#ddd；边框半径：10px；位置：绝对；左：80px；底部：-16px；填充：0；背景颜色：#fff;}.dashed{border:1pxdashed#ddd;边距顶部：11px；margin-bottom:11px;}.right{display:flex;弹性方向：列；证明内容：居中；对齐项目：弹性启动；padding-left:10px;}.desc{字体大小:10px;字体系列：PingFangSC-Regular；字体粗细：400；颜色：RGBA（170,170,170,1）；margin-top:10px;