上设计图

径向渐变实现：

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

最后百度到了这个：

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

实现效果

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

.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了。

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