css代码:网页圆角的做法
点击次数：30 次 发布日期：2008-11-21 16:02:08 作者：源代码网
|
源代码网推荐
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，宽度必须是固定的值，不设的情况下，如果里面有左或右浮动的标签，圆角的位置就会乱掉，不知道有没有别的解决办法
源代码网供稿. |
