CSS產生之初，只能制作直角邊框，雖然可以制作圓角的CSS3已經問世，但還不普及。曲線設計在網頁中的廣泛應用，使圓角成為了時髦的CSS技術之一。創建圓角的方法有很多種，每種要根據實際情況應用。下面我介紹一個最簡單的圓角邊框制作方法——固定寬度的圓角框。顧名思義，固定寬度的圓角框的寬度是固定的，而高度是可伸展的，如圖一的效果，這樣的圓角框只要兩張圖片即可制作完成。一張圖片用于頂部、一張用于底部圖片，如圖二中所示。如果要制作圖一中的效果，它的Html代碼如下： <div class="box"> <div class="top"> <div class="body">內容</div> </div> </div> 兩張背景圖片則如圖二中所示，名為top的div用top.gif作為背景置于頂部，名為box的div用bottom.gif作為背景置于底部，名為body的div使用背景和邊框效果即可，無需使用背景圖。 CSS代碼如下： .box { width:200px; background:url(bottom.gif) no-repeat left bottom; padding-bottom:9px; } .top { background:url(top.gif) no-repeat left top; padding-top:9px; } .body { background:#ecf1f5; border-left:1px solid #a9a9a9; border-right:1px solid #a9a9a9; padding:0 10px; } 這種圓角效果對可寬度固定、內容不固定的元素起到作用，如果遇到寬度和高度都不固定的元素，就需要用到其它方法了，在這里買個關子，請關注下篇文章。 上篇文章介紹了簡單的CSS圓角框技術，但它只能縱向伸展而不能橫向擴寬，本篇文章將在原有的基礎上介紹一個可自由伸展的CSS圓角框制作技術。可伸展的CSS圓角框制作方法要比固定寬度圓角框麻煩得多，由于它的可伸展性，需要多個Div和背景圖片嵌套才能完成。首先，準備圓角背景圖片，將它分成四個部分，如圖一所示。將四個圓角背景圖分開保存成tl.gif、tr.gif、bl.gif和br.gif四個圖片文件，應用于不同位置的四個Div。相對應的Html代碼如下：<div class="box"> <div class="br"> <div class="tl"> <div class="tr">內容</div> </div> </div> </div> CSS代碼如下： .box { width:202px; background:#ecf1f5 url(bl.gif) no-repeat left bottom; } .br { background:url(br.gif) no-repeat right bottom; padding-bottom:9px; } .tl { background:url(tl.gif) no-repeat left top; } .tr { background:url(tr.gif) no-repeat right top; padding:9px; } 以上的Html代碼結合CSS代碼的解釋： 1.名為box的Div在最外面，它的底圖是tl.gif，而且背景顏色和底圖顏色，這樣可以很好的完成無限伸展，如果把box的CSS屬性中寬度去掉，它照樣是個完美的圓角框。 2.名為br的Div背景為br.gif，它的作用是使box可向右下方伸展，加上9像素的內補丁，是為了讓圓角不被其它背景色和元素遮擋。 3.名為tl的Div背景為tl.gif，它的作用是使box左上方的圓角固定。 4.名為tr的Div背景為tr.gif，它的作用是使box右上方的圓角固定，并可向右伸展，加上9像素的內補丁，可以讓圓角不被其它背景色和元素遮擋。 如果去掉box的寬度，這個圓角仍然可以正常顯示，這就說明它是一個無懈可擊的可延伸圓角框技術。不知道您試驗成功了沒有。

轉載于:https://www.cnblogs.com/lookyou/archive/2011/10/29/2228496.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的用CSS制作圆角框的方法一,二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。