css代码:网页圆角的做法

1.首先把圆角切出来整合到一个图片，本例一个圆角的大小是11×11px：

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，宽度必须是固定的值，不设的情况下，如果里面有左或右浮动的标签，圆角的位置就会乱掉，不知道有没有别的解决办法

有好的文章希望站长之家帮助分享推广，猛戳这里我要投稿