如何不用border-radius 写圆角边框
2014-07-23 14:49
337 查看
html代码: <divclass="items"> <--上面的圆角边框--> <bclass="xtop"><bclass="xb1"></b><bclass="xb2"></b><bclass="xb3"></b><bclass="xb4"></b></b> <ulclass="xboxcon"> <divclass="item_title">系统管理员选项</div> <li><ahref="main_dorm.aspx">宿舍管理</a></li> <li><ahref="main_system.aspx">系统配置</a></li> <li><ahref="main_quanxian.aspx">权限设置</a></li> <li><ahref="addnews.aspx">发布新闻</a><ahref="newslist.aspx">[列表]</a></li> <li><ahref="m_log.aspx">系统日志</a></li> </ul>
<--下面的圆角边框--> <bclass="xbottom"><bclass="xb4"></b><bclass="xb3"></b><bclass="xb2"></b><bclass="xb1"></b></b>
<divclass="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:1pxsolid#77cce7;border-right:1pxsolid#77cce7;}
.xb1{margin:05px;background:#77cce7;}
.xb2{margin:03px;border-width:02px;}
.xb3{margin:02px;}
.xb4{height:2px;margin:01px;}
.xboxcon{margin:0px;display:block;border:0solid#77cce7;border-width:01px;}
解说:
首先,他的圆角实现并不是真的圆角,而是由4个b标签堆积起来的,每个b标签都是高度为1px,最后一个是2px。
所有的b标签都是块级元素block;
<bclass="xtop"><!--最外面的b标签,包住了4个子b标签。--> <bclass="xb1"></b><!--这个是最上面一个横线,背景颜色是#77cce7,左右都有5px的外边距,相当于5px的空白--> <bclass="xb2"></b><!--这个是第二层的,背景是白色,左右边框颜色#77cce7的2px,左右外边距是3px空白。--> <bclass="xb3"></b><!--第三层,背景白色,左右边框颜色#77cce7的1px,左右外边距是2px--> <bclass="xb4"></b><!--第四层,背景白色,左右边框#77cce7的1px,外边距1px--> </b> 下面的左右弧度就是上面的反过来叠加。 实际上就是层层积累的结果,每个b只显示几个像素的点,叠加起来,视觉上就是一个弧度。
就是用4条线,第一条最短实体线,第二条到第四条都是高度为1,两边边框为1的线,这三条线长度依次增长。最后就是形成上面的圆角,而下面的圆角采用反堆积这四条线。
相关文章推荐
- border-radius 圆角边框(CSS3.0)
- CSS3简明教程-2.2.CSS3边框之 圆角border-radius
- Border-radius属性--设置圆角边框
- CSS3 border-radius实现边框圆角
- css3(border-radius)边框圆角详解
- 圆角效果 border-radius——阴影 box-shadow——为边框应用图片 border-image
- CSS3之边框圆角:border-radius
- css3中的边框圆角border-radius的用法
- CSS3 border-radius边框圆角
- css3(border-radius)边框圆角详解
- CSS3利用border-radius实现边框圆角
- border-radius边框圆角效果(CSS3)
- border-radius是向元素添加圆角边框。
- css3(border-radius)边框圆角详解
- 实现CSS3中的border-radius(边框圆角)示例代码
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
- css3(border-radius) 边框圆角详解
- CSS3 border-radius实现边框圆角
- CSS3边框 圆角效果 border-radius
- Border-radius属性--设置圆角边框