如何做纯css的圆角矩形？
如何做纯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: #FFF}
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>
</head>
<body>
<div class= "RoundedCorner ">
<b class= "rtop "> <b class= "r1 "> </b> <b class= "r2 "> </b> <b class= "r3 "> </b> <b class= "r4 "> </b> </b>
<br> 无图片实现圆角框 <br> <br>
<b class= "rbottom "> <b class= "r4 "> </b> <b class= "r3 "> </b> <b class= "r2 "> </b> <b class= "r1 "> </b> </b>
</div>
</body>
</html>
[解决办法]
http://www.html.it/articoli/niftycube/index.html
http://www.html.it/articoli/niftycube/nifty1.html
[解决办法]
VML
[解决办法]
<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: #FFF}
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>
</head>
<body>
<div class= "RoundedCorner ">
<b class= "rtop "> <b class= "r1 "> </b> <b class= "r2 "> </b> <b class= "r3 "> </b> <b class= "r4 "> </b> </b>
<br/> 无图片实现圆角框 <br/> <br/>
<b class= "rbottom "> <b class= "r4 "> </b> <b class= "r3 "> </b> <b class= "r2 "> </b> <b class= "r1 "> </b> </b>
</div>
</body>
</html>
这个实际上是按照5 3 2 0这样的收缩方法描圆角了。嵌套的层次太多，不利于复用了。
一般做圆角矩形分成固定宽高（最容易），固定宽自适应高（一列三行），宽高自适应（三行三列，又称九宫格）
通常采用第二种方法这种得效果不错了。
把圆角底部图片切割出来放在 <div> </div〉套子里面 顶部图片切割出来放在 <h1> </h1> 或者 <p class= "headline "> </p> 作为背景。就OK了
纯css实现了那又如何，钻牛角尖，给自己设置障碍了
[解决办法]
http://www.xhtmlhelp.net/webdesign/code/6064.shtml
[解决办法]
用background-image属性。如果是固定宽度的矩形就要双层套叠：
<div class= "rounded ">
<div>
<!--content-->
</div>
</div>
如此设置css：
.rounded {
background-color: 背景色;
background-image: url( '顶部圆角区域.jpg ');
}
.rounded div {
background-image: url( '底部圆角区域.jpg ');
}
如果是要可变宽度的，就要分4个圆角来做，变成4层套叠。
