目前，我们要在网页中使用圆角效果，总是通过切图然后嵌套很多div，用背景来实现圆角效果。对于前端开发工程师来说，圆角的确是一个让人又爱又恨的东西，一方面顾及设计师追求的美观效果，另一方面又不得不增添很多工作投入。无意中看到别人写的一个用纯粹css来实现的圆角效果，研究了一下发现对于那些需求比较简单的圆角效果还是一种很好的方法。总结了一下，可以实现自适应的纯css圆角效果。
首先，我们看一下一般圆角的结构：
从下图可以明显看出圆角和直边的关系，其实把圆角放大之后可以看到圆角是由像素化的直边组成的：
