CSS实现圆角框

2012-11-27 来源：网络

【实例介绍】

CSS实现圆角框

做网页时为了美化网页，常常把表格边框的拐角处做成圆角，这样可以避免直接使用表格直角的生硬，使得网页整体更加美观。非常好的CSS圆角边框，让你的网站比其他的网站更具个性元素。为了实现各种布局的演示，这里首先介绍一种圆角框的方法。这种圆角框可以灵活地作为网页的一部分，运用在各种布局中。

【实例代码】


<html>
<head>
<style type="text/css">
body{background-color: #FFF;}
div#nifty1{ margin: 0 10px;background: #9BD1FA;}
div#nifty2{ margin: 0 10px;background: #9BD1FA;}
div#nifty3{ margin: 0 10px;background: #9BD1FA;}
div#nifty4{ margin: 0 3px;background: #9BD1FA;}
div#nifty5{ margin: 0 3px;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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>圆角表格</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" >
   <tr>
      <td>
   <div id="nifty1">
   <b class="rtop">
     <b class="r1"></b>
     <b class="r2"></b>
     <b class="r3"></b>
     <b class="r4"></b>
   </b>
   <div style="height:120px;"> 　　
     公司确立&ldquo;务实、创新、<img src="r3.jpg" width="90" height="83" hspace="5" 
vspace="0" align="right">规范、卓越&rdquo;为企业经营理念，始终坚持以经济效益为中心，
以房地产为主业，积极提高核心竞争力和凝聚力，！</div>
   <b class="rbottom">
     <b class="r4"></b>
     <b class="r3"></b>
     <b class="r2"></b>
     <b class="r1"></b>
   </b>
</div>
   </td>
   </tr>
</table>
</body>
</html>

【代码分析】

在浏览器中浏览，效果如图所示，圆角框可以随着浏览器窗口变化而发生变化。使用css制作圆角边框可能是网页前端设计师们最头痛的问题之一。圆角边框看似简单，但实现起来却很不简单，可能需要复杂的页面结构或大量的边角图片，方法很多，基本思想是很类似的。

圆角框运行效果