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

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pricks/archive/2009/12/03/1616177.html

文章标签：

#javascript #ViewUI

本文介绍三种不同的CSS圆角实现方法：使用背景重叠、图片配合布局及纯CSS技术。每种方法都详细解释了实现步骤，并附带示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　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事件里添加圆角样式，代码如下：

转载于:https://www.cnblogs.com/pricks/archive/2009/12/03/1616177.html