怎么做纯css的圆角矩形
日期：2014-05-17 浏览次数：20688 次
如何做纯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 ');
如何做纯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 ');
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
