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

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

上设计图

径向渐变实现:

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

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

最后百度到了这个:

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

实现效果

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

<html>

<head>

<meta charset="utf-8"/>

<title></title>

<style type="text/css">

.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;

}

</style>

</head>

<body>

<div class="cro">

<div class="cro_left_top"></div>

<div class="cro_right_top"></div>

<div class="cro_left_bottom"></div>

<div class="cro_right_bottom"></div>

</div>

</body>

</html>

 

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

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

展开阅读全文

没有更多推荐了,返回首页