纯css定制div圆角以及圆角发生缓存错误的解决之道_html/css_WEB-ITnose

　　1、用两张背景重叠制作圆角div

　　2、用图片制作DIV圆角4个方向

先把一个DIV分为 上中下 3个部分 3个宽度都一样。

上面做3个DIV  左边用一个圆角的左上角图片，中间就用线条，右边用圆角的右上角图片。

立即学习“前端免费学习笔记（深入）”；

中间就不变

下面也和上面的制作方法一样，只是圆角的图片不一样。

Unreal Images

免费的AI图片库

53

查看详情

　　3、用CSS

代码

 
    
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} 
 

                
             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  =   " " ;
                document.getElementById( " div_bottom " ).innerHTML  =   " " ;

            }
        

 
 

 

无图片实现圆角框 

 
 
 
 



    

　　这里的b标签可以全部换成div标签，效果是一样的。

　　不过当圆角是放在框架页面中，那么圆角就会显示成奇形怪状，对此，本人经过长时间研究，最终想了一个办法来解决，这个办法就是在window.onload事件里添加圆角样式，代码如下：