ddc
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg王国 ACG玩家 品牌设计 上海网站建设
求创科技
网站建设
中国互联
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> css代码:网页圆角的做法

css代码:网页圆角的做法

来源:中国设计秀    作者:口碑网    点击:837     加入收藏
关键字:css WEB标准 div

result.gif这是想要达到的圆角效果;
1.首先把圆角切出来整合到一个图片,本例一个圆角的大小是11×11px:corner.gif

2.html代码:

<div style=”background-color:#dceaff;border:1px solid #70a0eb; position:relative; width:500px;height:300px;”>
<div style=”float:left”>5555</div>
<div style=”float:left”>5555</div>
<div class=”LT”></div>
<div class=”RT”></div>
<div class=”LB”></div>
<div class=”RB”></div>
</div>

3.css代码:

.LT,.RT,.LB,.RB{
position:absolute;
width:11px;
height:11px;
background:url(corner.gif) no-repeat;
font-size:0;
}
.LT{
top:-1px;
left:-1px;
}
.RT{
top:-1px;
right:-1px;
background-position:-11px 0;
}
.LB{
bottom:-1px;
left:-1px;
background-position:0 -11px;
}
.RB{
bottom:-1px;
right:-1px;
background-position:-11px -11px;
}

4.碰到的问题:

·当圆角的尺寸较小时,.LT等设的高度会失效,会被ie默认的字体大小撑开,加了font-size:0;解决了问题

·最外层的div,宽度必须是固定的值,不设的情况下,如果里面有左或右浮动的标签,圆角的位置就会乱掉,不知道有没有别的解决办法

0
顶一下
2008-09-19 18:34:00    出处:中国设计秀cnwebshow.com
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口