線上產生純css代碼實現的圓角矩形的網站

方法：在右側填寫選擇 『class的名稱』，『背景顏色』，『圓角矩形的顏色』，點擊Show Me TO Code按鈕。映像就產生出來了。底下還有具體的css樣式表！

地址：http://www.spiffycorners.com

eg:

class name:conor 

background color :ffffff

foreground color :0a67e6
 

代碼如下:

<style type="text/css">
.conor{  

display:block;
} 

.conor *{  

display:block;
height:1px;
overflow:hidden;
background:#0a67e6;
} 

.conor1{  

border-right:1px solid #95bdf4;
padding-right:1px;
margin-right:3px;
border-left:1px solid #95bdf4;
padding-left:1px;
margin-left:3px;
background:#478dec;
} 

.conor2{  

border-right:1px solid #e6effc;
border-left:1px solid #e6effc;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
} 

.conor3{  

border-right:1px solid #3883ea;
border-left:1px solid #3883ea;
margin:0px 1px;
} 

.conor4{  

border-right:1px solid #95bdf4;
border-left:1px solid #95bdf4;
} 

.conor5{  

border-right:1px solid #478dec;
border-left:1px solid #478dec;
} 

.conor_content{  

padding:0px 5px;
background:#0a67e6;
} 

</style> <div>  

<b class="conor">  

<b class="conor1"><b></b></b>
<b class="conor2"><b></b></b>
<b class="conor3"></b>
<b class="conor4"></b>
<b class="conor5"></b> 

</b> <div class="conor_content">

<!-- Your Content Goes Here --> 

</div>
<b class="conor">  

<b class="conor5"></b>
<b class="conor4"></b>
<b class="conor3"></b>
<b class="conor2"><b></b></b>
<b class="conor1"><b></b></b> 

</b> 

</div>