最近试验了一个小功能就是CSS实现div的圆角
DIV圆角很多网站是使用圆角的图片实现的。而我不喜欢在网页中使用图片，所以研究了一下用CSS通过块的长度变化和背景色来实现圆角的功能。总的来说不复杂，但是写的CSS代码却比较多。据说HTML5里面有专门的属性能够完成这样的功能，但是毕竟HTML5还没有彻底成为标准。
一、放大效果图
这里面一共有10个div容器，为了突出效果，我把最上面和最下面两个块的背景色调了一下。
二、代码结构
代码结构是这样的
<div class="container"><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="content">正文</div><div class="div5"></div><div class="div6"></div><div class="div7"></div><div class="div8"></div></div>
div1~div4实现上面的圆角，div5~div6实现下面的圆角。
然后就可以编辑CSS代码了。
三、CSS原理
只要控制各个div的高度和左右也边距以及背景色和边框颜色就能实现圆角功能了。下图是效果图
CSS代码我就不贴出来了，我也是初学的水货。如果读者有更好是设计，我们可以讨论。如果想跟我探讨这个问题也可以给我留言。
