上图：
我们经常会去实现那种圆角的按钮，图片等等，但是想要实现这种内凹的圆角形状的块状还是比较复杂，我先讲讲思路：
第一，需要一个大块进行包裹，需要设置宽度和高度等；
第二，需要四个小块，来使用圆角的属性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>
