圓角的實現（用最簡單的方法，我認為是這樣）

 

  

     

  這是我的一位同事總結的，寫得很好，在此分享一下

一、一張圖片完成圓角矩形的效果

為了避免介面的過於死板，設計人員經常會設計出圓角矩形的板塊來

放置內容。對於開發人員來說，這往往又成為一種負擔。在用table的

時代，人們往往會把圓角矩形分塊切成四塊，把表格弄成九宮格，在

四個角上分別塞上四張圓角圖片。至於四面的邊框，比較理想的做法

則是設定border。

到div的時代，大家會考慮用float的div浮動到四個角上，分別將其背

景圖片設定成切下來的四張圖片，邊框再想另外的辦法進行設定。

不過這種方法其實還是換湯不換藥，只不過把表格換成div，把img換

成背景圖片，其基本的思路還是如一樣支離破碎。

說它是支離破碎的思想，其實也是在看過百度hi首頁對圓角矩形的css

樣式設計以後才這麼認為的——因為他們的設計才是真正的簡單實用

，其模型就是一個邊框和一個圓形圖片。直角矩形加上矩形，然後在

四個角上放上四個小正方形，背景圖通過對background-position的設

置分別顯示圓形圖片的各個部分，這樣就化整為零，實現了圓角矩形

的基本模型了。接下來，將四個小正方形分別往外挪動1px的舉例，就

把四個角上原來的邊框覆蓋掉了。不妨來直接看看百度hi的首頁：

圖顯示的是圓角矩形右上方的一段代碼，看右邊的css代碼可知，這個

div被float:right設定到了右邊，然後被

position:relative,right:-1px,top:-1px等樣式使其往外邊框的頂部

和右邊凸出1px的距離，從而將原來在此處的直線邊框覆蓋住，讓其外

表顯示為圖片上的曲線。而圖片顯示的位置則被background-

position:right top設定為顯示右上方的部分，從而實現將圖片化整

為零的效果。舉一反三，其他角上的效果也可以通過同樣的辦法實現

。

在實際應用中，可能一個頁面上會存在若干個不同的圓角矩形效果。

有的顏色不一樣，有的圓角直徑不一樣，則可以將css中公用的部分提

取出來，只用額外再加上很少部分的代碼就能產生不同效果的圓角矩

形。比如像下面這樣的代碼：

.rect,.rect2

{width:8px;height:8px;position:relative;overflow:hidden;font

-size:1px;}.rect2{width:10px;height:10px;}.c1{background-

position:left top;top:-1px;left:-1px;float:left;}.c2

{background-position:right top;top:-1px;right:-

1px;float:right;}.c3{background-position:left bottom;bottom:

-1px;left:-1px;float:left;}.c4{background-position:right

bottom;bottom:-1px;right:-1px;float:right;}.cb{background-

image:url(/img/home/circle.gif);}.cb2{background-image:url

(/img/home/circle2.gif);}在使用的時候，c1,c2,c3,c4是公用的部

分，定義了四個角上的樣式，rect,rect2定義了四個角的大小，

cb,cb2定義了圓角部分的背景圖片，通過對這幾個樣式的聯合使用，

就可以創造兩種不同圓角矩形效果了。
比如：
<div style="border:solid 1px #F2F2F2;">
    <div class="rect c1 cb"></div>
    <div class="rect c2 cb"></div>
    圓角矩形1
    <div class="rect c3 cb"></div>
    <div class="rect c4 cb"></div>
</div>

<div style="border:solid 1px #F4F4F4;">
    <div class="rect2 c1 cb2"></div>
    <div class="rect2 c2 cb2"></div>
    圓角矩形2
    <div class="rect2 c3 cb2"></div>
    <div class="rect2 c4 cb2"></div>
</div>

將四個圓角的圖片放在一張圖片上，就將四次請求減少為一次了。對

於像百度hi這樣的高訪問量頁面來說，這筆帳算得可真是精明。