要做一个带四个圆角的方形框，很自然地想到先用边框线做好框，然后再放上四个圆角。
我的做法是头部左右两圆角，中间内容，底部再是两个圆角。至于圆角，我是用背景图片来体现，头部做得很顺利。到了底部，傻眼了，两圆角竟然往两边和下面漂移了。
相关代码如下：[code]
[/code]
CSS：[code].cir_top{
height: 13px; background:url(dot_line.gif) right top repeat-x;
}
.cir_top .left {
height: 13px; width:13px; background:#FFFFFF url(cir_top_left3.gif) no-repeat; float:left;
}
.cir_top .right {
height: 13px; width:13px; background:#FFFFFF url(cir_top_right3.gif) no-repeat; float:right;
}
.cir_btm{
height: 15px; background:url(dot_line.gif) 0 11px repeat-x;
}
.cir_btm .left {
height: 13px; width:13px; background:#FFFFFF url(cir_btm_left1.gif) no-repeat; float:left;
}
.cir_btm .right {
height: 13px; width:13px; background:#FFFFFF url(cir_btm_right1.gif) no-repeat; float:right;
}[/code]
刚开始以为是背景位置不对或者是图片不对，检查了半天，都是好的。于是我给它们加上边框线，发现原来是溢出了。把宽给固定死了，也不行，照样往左飘移。但奇怪的是，我把这个代码整体复制出来，单独做个页面，又是一切正常的。后来，我突发奇想，那我设置下cir_btm的浮动右对齐（ float:right;）试试，没想到，好了，这时我又想那我再改成左:float:left;，哈哈，正常了。看来是浮动捣的鬼。至于为什么单独一个页面就行，而放进我这个页面中却会这样（顶部正常，底部不正常），我想可能是与页面中的其它元素的浮动设置有关系。暂时没时间具体研究，如果有高手有独到见解，请指教！