近來總看到圓角：有用圖做的、用JS打出來的。不太願意用，不過有時也是真的沒辦法，這裡介紹一種用CSS畫的簡單的圓角，只用於拋磚引玉，大家可以再發揮。
----------------------------------------------Html---------------------------------------------------------
<div class="bim212">
<!-- S top -->
<div class="bim-t">
<div class="bim-tt"></div>
<div class="bim-tm"></div>
<div class="bim-tb"></div>
</div>
<!-- E top -->
<!-- S main -->
<div class="bim-m">
測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字
</div>
<!-- E main -->
<!-- S bottom -->
<div class="bim-b">
<div class="bim-bt"></div>
<div class="bim-bm"></div>
<div class="bim-bb"></div>
</div>
<!-- E bottom -->
</div>
----------------------------------------------------------------------------------------------------------------
----------------------------------------------CSS---------------------------------------------------------
.bim212{
/*定義框大小*/
width:auto;
height:auto;
}
.bim-tt,.bim-bb,.bim-tm,.bim-bm,.bim-tb,.bim-bt,.bim-m{
/*定義框顏色*/
border-color:#FF6347;
}
.bim-t,.bim-b{
/*上部和下部*/
width:auto;
height:4px;
font-size:0;
line-height:0;
}
.bim-tt,.bim-bb{
width:auto;
height:0;
margin:0 4px;
border-top-width:1px;
border-top-style:solid;
}
.bim-tm,.bim-bm{
width:auto;
height:1px;
margin:0 2px;
border-left-width:2px;
border-right-width:2px;
border-left-style:solid;
border-right-style:solid;
}
.bim-tb,.bim-bt{
width:auto;
height:2px;
margin:0 1px;
border-left-width:1px;
border-right-width:1px;
border-left-style:solid;
border-right-style:solid;
}
.bim-m{
width:auto;
height:auto;
padding:3px;
border-left-width:1px;
border-right-width:1px;
border-left-style:solid;
border-right-style:solid;
}
----------------------------------------------------------------------------------------------------------------
其實跟九宮格差不多，只是把上面兩部分換成了圓角，不過想畫不同的圓角，所用到的樣式是不相同的，所以這個方法的靈活性不好，唯一的優點也許就是沒用到圖片跟腳本吧。:P