第一種方法：如果是CSS2.2的話，可以簡單寫一個制作圓角矩形，分上中下裁成三張圖
<title>CSS3實現圓角</title> <style type="text/css"> #box { width:200px; height:30px; background:url("../images/bt_bottom.jpg") no-repeat left bottom; } #box h1 { width:200px; height:20px; text-indent:-9999px; background:url("../images/bt_top.jpg") no-repeat left top; } /*下面這個是中間平鋪的圖，如果是純色的話，可以直接寫顏色值，也可以直接在上述box的背景上寫上背景顏色*/ #box div#content { width:200px; height:200px; background:url("../images/bt_bg.jpg") repeat-y; } </style> </head> <body> <div id="box"> <h1>標題</h1> <div id="content"></div> </div> </body> </html>
第二種方法：如果是使用CSS實現圓角的話，那么目前最簡單的方法就是CSS3中的-moz-border-radius、-webkit-border-radius以及border-radius一起使用效果更佳，目前能支持CSS3的瀏覽器有IE9及以上版本，google chrome10以上版本，firefox4及以上版本。否則的話，只能使用圖片來進行實現了，當然也可以使用css2，但是那個太過於麻煩。
下面我給你一個例子，你可以在以上我提到的相應瀏覽器中進行瀏覽，那樣效果會更好！
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3實現圓角</title> <style type="text/css"> .box { width:200px; height:200px; background:#09F; -moz-border-radius:8px;/*8px是圓角的角度，值越大則圓角效果越明顯，如果修改此項，請修改以下兩項的值，使之相同*/ -webkit-border-radius:8px; border-radius: 8px; } } </style> </head> <body> <div class="box"></div> </body> </html>
請將以上代碼復制粘貼后，保存為html文檔即可，然后利用目前最新版的瀏覽器進行瀏覽即可看到如下效果：