如何不用border-radius 写圆角边框

html代码：
<div class="items">
　　<--上面的圆角边框-->
    <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
  　<ul class="xboxcon">
  　  <div class="item_title">系统管理员选项</div>
      <li><a href="main_dorm.aspx">宿舍管理</a></li>
      <li><a href="main_system.aspx">系统配置</a></li>
      <li><a href="main_quanxian.aspx">权限设置</a></li>
      <li><a href="addnews.aspx">发布新闻</a><a href="newslist.aspx">[列表]</a></li>
      <li><a href="m_log.aspx">系统日志</a></li>
   </ul>

　<--下面的圆角边框-->

　　<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

  <div class="clear"></div>
 </div>

css样式

.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block;overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {border-left:1px solid #77cce7;border-right:1px solid #77cce7;}
.xb1 {margin:0 5px;background:#77cce7;}
.xb2 {margin:0 3px;border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px;margin:0 1px;}
.xboxcon {margin:0px;display:block;border:0 solid #77cce7;border-width:0 1px;}

解说：

     首先，他的圆角实现并不是真的圆角，而是由4个b标签堆积起来的， 每个b标签都是高度为1px，最后一个是2px。

　所有的b标签都是块级元素block；

<b class="xtop"> <!--最外面的b标签，包住了4个子b标签。-->
   <b class="xb1"></b><!--这个是最上面一个横线，背景颜色是#77cce7，左右都有5px的外边距，相当于5px的空白-->
   <b class="xb2"></b><!--这个是第二层的，背景是白色，左右边框颜色#77cce7的2px，左右外边距是3px空白。-->
   <b class="xb3"></b><!--第三层，背景白色，左右边框颜色#77cce7的1px，左右外边距是2px-->
   <b class="xb4"></b><!--第四层，背景白色，左右边框#77cce7的1px，外边距1px-->
</b>

下面的左右弧度就是上面的反过来叠加。
实际上就是层层积累的结果，每个b只显示几个像素的点，叠加起来，视觉上就是一个弧度。

就是用4条线，第一条最短实体线，第二条到第四条都是高度为1，两边边框为1的线，这三条线长度依次增长。最后就是形成上面的圆角，而下面的圆角采用反堆积这四条线。

如何不用border-radius 写圆角边框,布布扣,bubuko.com

如何不用border-radius 写圆角边框

原文：http://www.cnblogs.com/wujidns/p/3863017.html