css实现内凹圆角,利用圆角反向进行(转)

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

上设计图

css实现内凹圆角,利用圆角反向进行(转)_第1张图片

径向渐变实现:

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

css实现内凹圆角,利用圆角反向进行(转)_第2张图片

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

最后百度到了这个:

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

实现效果

css实现内凹圆角,利用圆角反向进行(转)_第3张图片

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

 

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

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

你可能感兴趣的:(css)