css实现内凹圆角，利用圆角反向进行（转）

最近写到小程序，设计方面有一个设计图涉及内凹圆角问题。网上百度好多种，都是通过径向渐变实现的。虽然能实现单个角，但是当四个角合在一起就很麻烦了。

上设计图

径向渐变实现：

background:radial-gradient(40rpx at right bottom,transparent 50%,#1889F6 50%);

但是如果四个重合在一起，我的图片背景是渐变的，那么两个圆角是需要两个div标签的。真是越想越不对。

最后百度到了这个：

原文地址：https://blog.csdn.net/u014230198/article/details/76620636?utm_source=blogxgwz0

实现效果

这里注意我截图，看看这个是这样的。代码其实是这个样子的

 

其实作者的意图很简单，还是用的原来的圆角熟悉，但是我把圆角挪动下位置那么不就ok了。

唉，自从有了百度，越来越赖。思考都变迟钝了