css 語法的圓角框效果

這個問題可以在網路上找到許多教學文件，本文是我在blogger的實作筆記。

第一，修改 blogger 的HTML 範本，在</head>前增加下面這段，同時，依照需要修改顏色值：

1）div.RoundedCorner{background: #9CDCA5}：圓角框內的背景顏色

2）b.rtop, b.rbottom{display:block;background: #FFF}：4個圓角框外的背景顏色，應與 blog 文件的背景顏色相同。

3）b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9CDCA5} ：圓角框內的背景顏色，應與「1）」相同。

/*圓角*/ <style type='text/css'> div.RoundedCorner{background: #9CDCA5} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9CDCA5} 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> /*圓角*/

第二，在編輯文件時，貼上下面這段 HTML CODE，即可呈現圓角框效果。

1）圓角框裡的文字、圖形等內容：<p>CSS圓角框</p>

2）如不需外加表格排版效果，可僅使用橙色＜div＞段。

3）<p>CSS圓角框</p>以上以下的HTML CODE均不可修改或刪除，否則即會影響圓角效果。

<table id="AutoNumber1" style="border-collapse: collapse" bordercolor="#111111" cellspacing="0" cellpadding="0" width="640" border="0"><tbody> <tr> <td width="20">&#160;</td> <td width="600"> <div class="RoundedCorner"><b class="rtop"><b class="r1"></b> <b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <p>CSS圓角框</p> <b class="rbottom"><b class="r4"></b><b class="r3"></b> <b class="r2"></b><b class="r1"></b></b></div> </td> <td width="20">&#160;</td> </tr> </tbody></table>

.