當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > DIV+CSS > CSS實(shí)現(xiàn)圓角框

CSS實(shí)現(xiàn)圓角框

2012/11/27 15:15:45作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例介紹】

CSS實(shí)現(xiàn)圓角框

做網(wǎng)頁(yè)時(shí)為了美化網(wǎng)頁(yè)，常常把表格邊框的拐角處做成圓角，這樣可以避免直接使用表格直角的生硬，使得網(wǎng)頁(yè)整體更加美觀。非常好的CSS圓角邊框，讓你的網(wǎng)站比其他的網(wǎng)站更具個(gè)性元素。為了實(shí)現(xiàn)各種布局的演示，這里首先介紹一種圓角框的方法。這種圓角框可以靈活地作為網(wǎng)頁(yè)的一部分，運(yùn)用在各種布局中。

【實(shí)例代碼】



<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;務(wù)實(shí)、創(chuàng)新、<img src="r3.jpg" width="90" height="83" hspace="5" 
vspace="0" align="right">規(guī)范、卓越&rdquo;為企業(yè)經(jīng)營(yíng)理念，始終堅(jiān)持以經(jīng)濟(jì)效益為中心，
以房地產(chǎn)為主業(yè)，積極提高核心競(jìng)爭(zhēng)力和凝聚力，！</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>
 
 

【代碼分析】

在瀏覽器中瀏覽，效果如圖所示，圓角框可以隨著瀏覽器窗口變化而發(fā)生變化。使用css制作圓角邊框可能是網(wǎng)頁(yè)前端設(shè)計(jì)師們最頭痛的問(wèn)題之一。圓角邊框看似簡(jiǎn)單，但實(shí)現(xiàn)起來(lái)卻很不簡(jiǎn)單，可能需要復(fù)雜的頁(yè)面結(jié)構(gòu)或大量的邊角圖片，方法很多，基本思想是很類似的。

圓角框運(yùn)行效果

 【素材及源碼下載】

請(qǐng)點(diǎn)擊：CSS實(shí)現(xiàn)圓角框 下載本實(shí)例相關(guān)素材及源碼

 

標(biāo)簽： CSS  實(shí)現(xiàn)  圓角框