这段css圆角代码如何理解？

来源：百度知道 编辑：UC知道 时间：2024/06/06 20:27:53
/*圆角边框开始*/
.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;}
/*圆角边框结束*/

<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>
<l

圆角代码：

{border-radius: 20px;}

参数表示圆角半径，IE/Opera目前不支持这个属性

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

本来不想解释的，因为这个原理很简单，但是解释起来很复杂。
首先，他的圆角实现并不是真的圆角，而是由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只显示几个像素的点，叠加起来，视觉上就是一个弧度，细心点就能弄出来的。