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

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

上设计图css

径向渐变实现：html

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

可是若是四个重合在一块儿，个人图片背景是渐变的，那么两个圆角是须要两个div标签的。真是越想越不对。小程序

最后百度到了这个：spa

实现效果设计

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

blog

utf-8

.cro{

width: 100px;

height: 100px;

border: 1px solid #58C4E6;

position: relative;

}

.cro_left_top,.cro_right_top,.cro_left_bottom,.cro_right_bottom{

position: absolute;

width: 20px;

height: 20px;

border: 1px solid #fff;

z-index: 1;

background: #fff;

}

.cro_left_top{

top: -1px;

left: -1px;

border-radius:0px 0px 20px 0px;

border-bottom: 1px solid #58C4E6;

border-right: 1px solid #58C4E6;

}

.cro_right_top{

top: -1px;

right: -1px;

border-radius:0px 0px 0px 20px;

border-bottom: 1px solid #58C4E6;

border-left: 1px solid #58C4E6;

}

.cro_left_bottom{

left: -1px;

bottom: -1px;

border-radius:0px 20px 0px 0px;

border-top: 1px solid #58C4E6;

border-right: 1px solid #58C4E6;

}

.cro_right_bottom{

right: -1px;

bottom: -1px;

border-radius:20px 0px 0px 0px;

border-top: 1px solid #58C4E6;

border-left: 1px solid #58C4E6;

}

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

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