在網(wǎng)頁設(shè)計(jì)時(shí)，頁面中圓角的實(shí)現(xiàn)一直是個(gè)很難解決的問題，雖然現(xiàn)在有很多種實(shí)現(xiàn)方法，但都是比較麻煩的，這里想通過此例介紹一種CSS新技術(shù)，即CSS新的屬性border-radius來實(shí)現(xiàn)網(wǎng)頁設(shè)計(jì)中的圖片的圓角化。

【操作步驟】

第1步，啟動(dòng)Dreamweaver，新建文檔，保存為index.html。

第2步，首先構(gòu)建網(wǎng)頁結(jié)構(gòu)，網(wǎng)頁結(jié)構(gòu)非常簡單，就是在網(wǎng)頁添加了4張圖片。

<img class="a" src="images/1.jpg"/>

<img class="a" src="images/2.jpg"/>

<img class="a" src="images/3.jpg"/>

<img class="a" src="images/4.jpg"/>

第3步，定義網(wǎng)頁的基本屬性。

body {    margin: 20px;    padding: 20px;}

在以上的代碼中設(shè)置了網(wǎng)頁四周的補(bǔ)白為20px，用padding了網(wǎng)頁的內(nèi)邊距為20px，設(shè)置為居中。

第4步，運(yùn)用border-radius屬性設(shè)置圓角圖片。

.a {    

width: 150px;    

height: 150px;    

border: 1px solid gray;    

-moz-border-radius: 10px;      /*僅Firefox支持，實(shí)現(xiàn)圓角效果*/    

-webkit-border-radius: 10px;   /*僅Safari，Chrome支持，實(shí)現(xiàn)圓角效果*/    

-khtml-border-radius: 10px;    /*僅Safari，Chrome支持，實(shí)現(xiàn)圓角效果*/    

border-radius: 10px;           /*Firefox，Opera，Safari，Chrome支持，實(shí)現(xiàn)圓角效果*/}

在以上代碼中，首先定義了圖片的寬度和高度，接著設(shè)置了圖片的邊框樣式，然后用border-radius定義了圖片的圓角。

提示：border-radius屬性的作用分別如下。   

?最多可以設(shè)置4個(gè)值，分別是矩形4個(gè)圓角的半徑，如border-radius:10px，表示4個(gè)角都為圓角，且每個(gè)圓角的半徑都為10px。   

?也可以設(shè)置兩個(gè)值，如border-ra-dius:10px 5px，第1個(gè)值代表左上圓角和右下圓角，第2個(gè)值代表右上圓角和左下圓角。   

?如果設(shè)置3個(gè)值，如border-radius:10px5px 1px，第1個(gè)值代表左上圓角，第2個(gè)值代表右上圓角和左下圓角，第3個(gè)值代表右下圓角。   上圓角、右上圓角、右下圓角和左下圓角。   

?也可以將4個(gè)角拆分成4個(gè)單獨(dú)的屬性來設(shè)置：左上圓角：border-top-left-radius、右上圓角：border-top-right-radius，右下圓角：border-bottom-right-radius，左下圓角：border-bottom-left-radius。如IE8及其以下版本瀏覽器就不能支持這種技術(shù)，所以在使用它的時(shí)候還要考慮到瀏覽器的兼容問題。

?如果設(shè)置了4個(gè)值，如border-ra-dius:10px 9px 8px 7px，4個(gè)值分別代表左上圓角、右上圓角、右下圓角和左下圓角。   

?也可以將4個(gè)角拆分成4個(gè)單獨(dú)的屬性來設(shè)置：左上圓角：border-top-left-radius、右上圓角：border-top-right-radius，右下圓角：border-bottom-right-radius，左下圓角：border-bottom-left-radius。如IE8及其以下版本瀏覽器就不能支持這種技術(shù)，所以在網(wǎng)頁設(shè)計(jì)的時(shí)候還要考慮到瀏覽器的兼容問題。