• 纯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>";
                }
            
    </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事件里添加圆角样式,代码如下:

      

  • 相关阅读:
    页面滚动性能优化之passive
    【webpack4x】部分底层原理及手写一个简单打包工具
    【webpack4x】实战配置及问题解析
    【webpack4x】高级概念
    【webpack4x】核心概念
    VMware虚拟机服务的vmware-hostd自动启动和停止
    海淘电商网址
    一键批量ping任意ip段的存活主机
    cpanel导入大数据库(mysql)的方法
    awstats 日志分析
  • 原文地址:https://www.cnblogs.com/pricks/p/1616177.html
Copyright © 2020-2023  润新知