纯css定制div圆角以及圆角发生缓存错误的解决之道
1、用两张背景重叠制作圆角DIV
<div id="bg">
<div id="bg_left"></div>
</div>
让ID为bg的做个背景，背景向右对齐，向左延伸。
然后让ID为bg_left的浮动在左边，宽度BG的。
bg_left的背景就是左边的圆角向右延伸，但宽度小于bg，bg的背景就是右圆角向左延伸，如不用做透明的话，宽度多少就无所谓了，当然，方向也可以反过来，让bg_left这个框float在右边。
2、用图片制作DIV圆角4个方向
先把一个DIV分为 上中下 3个部分 3个宽度都一样。
上面做3个DIV 左边用一个圆角的左上角图片，中间就用线条，右边用圆角的右上角图片。
中间就不变
下面也和上面的制作方法一样，只是圆角的图片不一样。
3、用CSS
代码
<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<script language="javascript">
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof(window.onload) !='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
addLoadEvent(windowOnload0);
//页面加载时需要执行的方法
function windowOnload0(){
document.getElementById("div_top").innerHTML = "<b class='r1'></b><b class='r2'></b><b class='r3'></b><b class='r4'></b>";
document.getElementById("div_bottom").innerHTML = "<b class='r4'></b><b class='r3'></b><b class='r2'></b><b class='r1'></b>";
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<script language="javascript">
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof(window.onload) !='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
addLoadEvent(windowOnload0);
//页面加载时需要执行的方法
function windowOnload0(){
document.getElementById("div_top").innerHTML = "<b class='r1'></b><b class='r2'></b><b class='r3'></b><b class='r4'></b>";
document.getElementById("div_bottom").innerHTML = "<b class='r4'></b><b class='r3'></b><b class='r2'></b><b class='r1'></b>";
}
</script>
</head>
<body>
<div class="RoundedCorner">
<b id="div_top" class="rtop"></b>
无图片实现圆角框
<b id="div_bottom" class="rbottom"></b>
</div>
<br>
</body>
</html>
</script>
</head>
<body>
<div class="RoundedCorner">
<b id="div_top" class="rtop"></b>
无图片实现圆角框
<b id="div_bottom" class="rbottom"></b>
</div>
<br>
</body>
</html>
这里的b标签可以全部换成div标签，效果是一样的。
不过当圆角是放在框架页面中，那么圆角就会显示成奇形怪状，对此，本人经过长时间研究，最终想了一个办法来解决，这个办法就是在window.onload事件里添加圆角样式，代码如下：
