.g-container{position:relative;width:300px;height:100px;.g-content{height:100px;.g-filter{height:100px;background:radial-gradient(circleat50%-10px,transparent0,transparent39px,#00040px,#000);}}}得到这么一个简单的图形：看到这里，你肯定会奇怪为什么这个图形要嵌套3层div？一个div还不够吗？因为我们必须使用filter:contrast()和filter:blur()的神奇组合。我们简单修改一下上面的代码，仔细观察和上面CSS的异同点：.g-container{position:relative;width:300px;height:100px;.g-content{height:100px;filter:contrast(20);背景颜色：白色；溢出：隐藏；.g-filter{filter:blur(10px);height:100px;background:radial-gradient(circleat50%-10px,transparent0,transparent29px,#00040px,#000);}}}我们添加了filter:contrast(20)和background-color:white到.g-content，以及filter:blur(10px)到.g-filter。神奇的事情发生了，我们得到了这样一个效果：通过contrastfilter，消除了高斯模糊的模糊边缘，原来的直角变成了圆角，Amazing。通过一张Gif图片更直观的感受：这里有几个细节需要注意：.g-content这一层需要设置为background和overflow:hidden（可以自己尝试去掉看看效果）outer直角也变圆了根据上面第二点，外直角也变成了圆角。如果想让这个圆角也是直角，还有一层.g-container。我们可以在这一层添加一个伪元素来添加角以直角覆盖：.g-container{&::before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;z-index:1;background:radial-gradient(circleat50%-10px,transparent0,transparent60px,#00060px,#0000);}}我们可以得到只有中间部分是凹圆角的效果，其他四个角为直角：完整代码可以点击这里：CodePenDemo-SmoothconcaveroundedcornersByfilter[2]当然，由于上述平滑凹圆角应用了blurfilter，不建议将DOM放在里面。最好用作背景，内部内容可以通过其他方式叠加在上面。关于filter:contrast()和filter:blur()的神奇融合效果，可以点开这篇文章了解更多——你不知道的CSS滤镜技巧和细节[3]最后实现平滑度本文中的concave圆角还有其他几种方式，本质上与本文第一种方式类似。都是叠加的眼罩，就不一一列举了。本文的核心目的是介绍第二种过滤方式。好了，本文到此结束，希望这篇文章对你有所帮助：）参考文献[1]CodePenDemo-平滑凹圆角：https://codepen.io/Chokcoco/pen/oNGgyeK[2]CodePenDemo-平滑凹圆角滤镜：https://codepen.io/Chokcoco/pen/JjroBPo[3]你不知道的CSS滤镜技巧和细节：https://github.com/chokcoco/iCSS/issues/30