css 实现内凹圆角

我们经常会去实现那种圆角的按钮，图片等等，但是想要实现这种内凹的圆角形状的块状还是比较复杂，我先讲讲思路：

 第一，需要一个大块进行包裹，需要设置宽度和高度等；

 第二，需要四个小块，来使用圆角的属性border-radius，进行不同方向的圆角设置；

 第三，为这些块加上border属性。

 代码如下：

<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: 0 0 20px 0;
        border-bottom: 1px solid #58C4E6;
        border-right: 1px solid #58C4E6;
    }
 
    .cro_right_top {
    
    
        top: -1px;
        right: -1px;
        border-radius: 0 0 0 20px;
        border-bottom: 1px solid #58C4E6;
        border-left: 1px solid #58C4E6;
    }
 
    .cro_left_bottom {
    
    
        left: -1px;
        bottom: -1px;
        border-radius: 0 20px 0 0;
        border-top: 1px solid #58C4E6;
        border-right: 1px solid #58C4E6;
    }
 
    .cro_right_bottom {
    
    
        right: -1px;
        bottom: -1px;
        border-radius: 20px 0 0 0;
        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>

猜你喜欢