软件学堂

网游分类软件分类

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制作圆角边框可能是网页前端设计师们最头痛的问题之一。圆角边框看似简单,但实现起来却很不简单,可能需要复杂的页面结构或大量的边角图片,方法很多,基本思想是很类似的。

圆角框运行效果

 【素材及源码下载】

请点击:CSS实现圆角框 下载本实例相关素材及源码

 

上一篇:DIV+CSS三列布局
下一篇:div+css变宽度网页布局实例制作

相关文章