我们来实现中间看起来比较复杂的“groove”部分。我能想到圆角，圆，和圆角有关的直径。To...有人说svg也可以用。确实svg可以做任何事情，不仅是这个形状，还可以画一条路径并填充它。这个比较一般，不是特例，这里不展开讨论。这边走。还有一个原因是svg生成的shape也是固定的，只能按比例缩放，不能做其他的适配。1、看到这样一个圆角的形状，大部分人可能会疑惑border-radius是否可以使用负值。毕竟，和边距一样，使用负值往往能带来意想不到的效果。con{border-radius:-10px;}可惜这种写法根本不合法。在谷歌浏览器上打开控制台，可以看到直接删除了。2.圈子这种想法虽然不好，但是我们可以改变一下。假设我们现在有一个圆，它本身是没有颜色的，但是它有一个黑色的边框。现在我们想象一下，如果这个圆的边框越来越大，外面有一个容器，超出了就会隐藏，那会是什么发生？如果这个圆在右下角，那么就变成这样，这不就是我们需要的吗？现在我们用css来实现。根据上面的分析，我们的背景颜色应该是圆圈边框的颜色，所以要把原来的背景去掉。优惠券左侧{position:relative;溢出：隐藏；/*background:#252525*/}/*为了减少html的结构，我们使用伪元素*/.coupon-left::before{position:absolute;宽度：20px；高度：20px；顶部：-210px；右：-210px；边界半径：50%；border:200pxsolid#252525;/*边框只需要能够覆盖整个容器即可*/}这样就实现了一个凹槽。本来以为这样就可以了，复制改写就可以了，结果发现并没有那么简单，因为现在的形状是切出来的，不能让之前的圆角遮住整个，不然将出现下圆角。不多说了，这时候我们就需要用到剪辑裁剪功能了。这里简单介绍一下clip。我们一般使用rect函数。有四个值，分别是top,right,bottom,leftclip:rect(,,,);这里我们修改刚才写的样式，加入如下代码。部分隔离出来，我们来做下半部分的groove，我们用::after，写法完全一样，只是注意坐标。优惠券-left::after{content:'';位置：绝对；顶部：-210px；显示：块；右：-210px；宽度：20px；高度：20px；边界半径：50%；边框：200px实心#252525；剪辑：rect(135px,210px,285px,0);两个凹槽的实现，右边的原理是一样的，下面是完整的css代码html,body{box-sizing:border-box;保证金：0；填充：20px；高度：100%；背景：#fadaa7；}.优惠券{显示：内联块；溢出：隐藏；border-radius:10px;}.coupon-left{float:left;宽度：150px；高度：150px；position:relative;}.coupon-left::before{content:'';位置：绝对；顶部：-210px；显示：块；右：-210px；宽度：20px；高度：20px；边界半径：50%；边框：200px实心#252525；clip:rect(0,210px,285px,0);}.coupon-left::after{content:'';位置：绝对；底部：-210px；：堵塞;右：-210px；宽度：20px；高度：20px；边界半径：50%；边框：200px实心#252525；剪辑：rect(135px,210px,285px,0);}.coupon-con{float:left;宽度：350px；高度：150px；position:relative;}.coupon-con::before{content:'';位置：绝对；顶部：-410px；显示：块；左：-410px；宽度：20px；高度：20px；边界半径：50%；边框：400px实心#fff；clip:rect(0,800px,485px,410px);}.coupon-con::after{content:'';:-410px;显示：块；左：-410px；宽度：20px；高度：20px；边界半径：50%；边框：400px实心#fff；剪辑：矩形（335px，800px，485px，410px）；这是一个codependemohttps://codepen.io/xboxyan/pe...3.RadialGradient另一个想法是radialgradient径向渐变的具体使用可以参考张新旭的文章CSS3radial-gradient语法及辅助理解案例10那么如何实现我们想要的效果呢？我们先看看径向渐变的语法radial-gradient([[||][at]?,|at,]?[,]+);径向渐变由其中心定义。用法{background:radial-gradient(circleat50px50px,yellow,orange33.33%,red66.666%,white)}我们将渐变的颜色改为从透明到黑色的渐变{background:radial-gradient(circleat50px50px,transparent,#252525)}现在给透明部分一个距离，给灰色部分一个距离，让他们之前的渐变区域重叠，变成纯色{background:radial-gradient(circleat50px50px,transparent20px,#25252520px)}现在把这个空心圆移到边缘{background:radial-gradient(circleatrighttop,transparent20px,#25252520px)}现在问题是如何做两个凹槽我们有两种方法，一种和上面一样，用两个伪元素拼接，第二种是直接用css3多背景拼接。再说第二个{background:radial-gradient(circleatrighttop,transparent20px,#25252520px,#252525100px,transparent100px),radial-gradient(circleatrightbottom,transparent20px,#25252520px,#252525100px,transparent100px)}我们可以继续拼接，说不定可以达到我们想要的效果现在第一种方法我们把代码放到我们的example.coupon-left::before{content:'';位置：绝对；顶部：0；左：0；右：0；高度：50%；背景：径向渐变（右上角的圆圈，透明10px，#25252510px，#25252510px）}.coupon-left::af三{内容：'';位置：绝对；底部：0；左：0；右：0；高度：50%；background:radial-gradient(circleatrightbottom,transparent10px,#25252510px,#25252510px)}.coupon-con::before{content:'';位置：绝对；顶部：0；左：0；右：0；高度：50%；background:radial-gradient(circleatlefttop,transparent10px,#25252510px,#fff10px)}.coupon-con::after{content:'';位置：绝对；底部：0；左：0；右：0；高度：50%；background:radial-gradient(circleatleftbottomHowabout,transparent10px,#25252510px,#fff10px)，是不是很方便？它们都是相对值，这意味着更好的适应性。下面是codependemohttps://codepen.io/xboxyan/pe...section相对于使用圆形，这种径向渐变更方便展开写起来容易，但不代表圆形方式的想法是错误的。如果只是做一个圆形的缺口，那样写起来更方便，而且在思维上也领先一步，可以更好地锻炼人的空间思维和想象力，这意味着更多的是从设计师的角度来看。这大概是和一般程序员思维最大的不同。同样，虽然目前基本支持标准的写法，但还是需要注意平时的项目。实在是兼容性要求，所以只能用图片代替了。谁是客户第一？