这段css圆角代码如何理解

首页 → 解决方案 → 基础语法 → HTML前端 → 这段css圆角代码如何理解

这段css圆角代码如何理解

分享到：

dsfsdf

时间: 2011-03-17 16:03 阅读(263) 评论(0)

很多的CSS圆角代码，凡是通过CSS实现的，无非都是以margin左右偏移来实现，本例也是一样，不过对于一些基于firefox,chrome等非IE内核来说，可以有一些独特的方法来实现，本例所使用的方法，是兼容目前所有主流浏览器的，方式，先看下效果吧：

实现的CSS代码：

<style>

.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;}

</style>

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

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

相关解决方案
• DIV+CSS圆角边框
(376次浏览)
2011-03-17
• 再谈CSS圆角
(233次浏览)
2011-03-17
• DIV+CSS圆角的简单实现方法（图）
(269次浏览)
2011-03-17
• 简写CSS圆角
(296次浏览)
2011-03-17
• 这段css圆角代码如何理解
(263次浏览)
2011-03-17
• IE6 img png透明bug的解决办法
(479次浏览)
2011-03-21
• CSS关于align="absmiddle"成员名称说明
(412次浏览)
2011-03-28
• Sitemap 的 XML 格式详细介绍
(203次浏览)
2011-03-29

网友评论：共有0条评论

我来评论

小提示：: • 运行html请点击源码添加; • 添加完毕后加上<br />; • 显示html直接复制黏贴; • 高亮代码请点击插入代码

小贴士：

1. 请各位网友在回复的时候不为了回复而回复，尽量发一些有质量的回复内容。

2. 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。

3. 请勿到处挖坑绊人、招贴广告。即占空间让人厌烦,又没人会搭理,于人于己都无利。如果您发现自己的回复不见了,请参考以上3条。

这段css圆角代码如何理解

相关解决方案