div+css实现圆角矩形的多种方法总结

发布时间:2013-07-28编辑:脚本学堂
前面也讲过div+css实现圆角矩形的文章,那只是其中的一种,本文主要对div+css实现圆角矩形的方法进行总结,有需要的朋友认真看一下。

1.css3实现圆角矩形,兼容性有问题
 

复制代码 代码示例:
 <div id="round"></div>
#round {
    padding:10px; width:300px; height:50px;
    border: 5px solid #dedede;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
 

css3的,很多小的浏览器不兼容,360之类的。

2.拼图的方法实现圆角矩形
 

复制代码 代码示例:
<style type="text/css">
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}
.k {height:300px;}
</style>
</head>
<body>
<div>
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1 k">
<font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>

不过这个在ie7下有问题,下面的会和上面的脱节,所以最好用css hack解决一下。

3,直接图片,最简单的方式
不过自适应高度的话有些问题,所以要改进一下
 

复制代码 代码示例:
 <style>
    .top{backgroup:上边带弧度的一小部分}
    .bottom{backgroup:下边带弧度的一小部分}
    .content{border-left:1px solid 颜色;border-right:1px solid 颜色}
</style>
<p class="top"></p>
<div class="content"></div>
<p class="bottom"></p>
 

这种方式可能也有兼容性的问题,用position解决.

最近发现一个问题.~在出现兼容性的问题的时候,发现ie7下和360下是完全一样的问题。所以如果要求必须兼容360浏览器的话,解决了ie7就可以了~。