在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，頁(yè)面中圓角的實(shí)現(xiàn)一直是個(gè)很難解決的問(wèn)題，雖然現(xiàn)在有很多種實(shí)現(xiàn)方法，但都是比較麻煩的，這里想通過(guò)此例介紹一種CSS新技術(shù)，即CSS新的屬性border-radius來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)中的圖片的圓角化。
【操作步驟】
第1步，啟動(dòng)Dreamweaver，新建文檔，保存為index.html。
第2步，首先構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)，網(wǎng)頁(yè)結(jié)構(gòu)非常簡(jiǎn)單，就是在網(wǎng)頁(yè)添加了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)頁(yè)的基本屬性。
body { margin: 20px; padding: 20px;}
在以上的代碼中設(shè)置了網(wǎng)頁(yè)四周的補(bǔ)白為20px，用padding了網(wǎng)頁(yè)的內(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ú)的屬性來(lái)設(shè)置：左上圓角：border-top-left-radius、右上圓角：border-top-right-radius，右下圓角：border-bottom-right-radius，左下圓角：border-bottom-left-radius。如IE8及其以下版本瀏覽器就不能支持這種技術(shù)，所以在使用它的時(shí)候還要考慮到瀏覽器的兼容問(wèn)題。
?如果設(shè)置了4個(gè)值，如border-ra-dius:10px 9px 8px 7px，4個(gè)值分別代表左上圓角、右上圓角、右下圓角和左下圓角。
?也可以將4個(gè)角拆分成4個(gè)單獨(dú)的屬性來(lái)設(shè)置：左上圓角：border-top-left-radius、右上圓角：border-top-right-radius，右下圓角：border-bottom-right-radius，左下圓角：border-bottom-left-radius。如IE8及其以下版本瀏覽器就不能支持這種技術(shù)，所以在網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候還要考慮到瀏覽器的兼容問(wèn)題。