从GTalk的css模板里抠出来的东东 :P
道理其实很简单,架设矩形的圆角高度为4,那么由上到下依次是(单位px,所给出的边框宽度均为1px且颜色保持保持一致):
高度为1,左右间隔均为5,仅有上方边框的div;
高度为1,左右间隔均为3,仅有左右边框的div;
高度为1,左右间隔均为2,仅有左右边框的div;
高度为1,左右间隔均为1,仅有左右边框的div;
左右间隔均为0,仅有左右边框的div——放置内容;
高度为1,左右间隔均为1,仅有左右边框的div;
高度为1,左右间隔均为2,仅有左右边框的div;
高度为1,左右间隔均为3,仅有左右边框的div;
高度为1,左右间隔均为5,仅有下方边框的div
废话少说,代码在此
css样式定义:
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)