WEB2.0 web20
当前位置:首页 > 网站建设专题 > WEB2.0
css代码:网页圆角的做法
发布日期:2008-11-12 阅读次数:826 字体大小:
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,宽度必须是固定的值,不设的情况下,如果里面有左或右浮动的标签,圆角的位置就会乱掉,不知道有没有别的解决办法

佚名