網(wǎng)站設(shè)計(jì)博納網(wǎng)絡(luò)在上篇文章中分享過如何處理圖像陰影的技巧，本文主要介紹我們的前端設(shè)計(jì)師是如何設(shè)計(jì)圓角圖片的實(shí)操案例。頁面中圓角的實(shí)現(xiàn)一直是一個(gè)很難解決的問題，雖然現(xiàn)在有很多種實(shí)現(xiàn)方法，但都是比較麻煩的，這里想通過此例介紹一種css新技術(shù)，即css新的屬性border-radius來實(shí)現(xiàn)圖片的圓角化。
本例的演示效果如圖5.53所示。
【操作步驟】
第1步，啟動(dòng)Dreamweaver，新建文檔，保存為iudex.htlnl。
第2步，首先構(gòu)建網(wǎng)頁結(jié)構(gòu)，網(wǎng)頁結(jié)構(gòu)非常簡單，就是在網(wǎng)頁添加了4張圖片
<imgclass="a"src="images/1.jpg"/>
<imgclass="a"src="images/2.jpg"/>
<imgclass="a"src="images/3.jpg"/>
<imgclass="a"src="images/4.jpg"/>
第三步，定義網(wǎng)頁的基本屬性
在以上的代碼中設(shè)置了網(wǎng)頁四周的補(bǔ)白為20px．用padding了網(wǎng)頁的內(nèi)邊距為20px，設(shè)置為居中。顯示效果如圖5.54所示。
網(wǎng)站設(shè)計(jì)圓角處理效果圖5.54設(shè)置網(wǎng)頁屬性
第4步，運(yùn)用border-radius屬性設(shè)置圓角圖片。
在以上代碼中，首先定義了圖片的寬度和高度，接著設(shè)置了圖片的邊框樣式，然后用border-radius定義了圖片的圓角。提示：border-radius屬|(zhì)生的作用分別如下。
1.最多可以設(shè)置4個(gè)值，分別是矩形4個(gè)圓角的半徑．如border-radius:iOpx，表示4個(gè)角部為圓角，且每個(gè)圓角的半徑都為iOpx。
2.也可以設(shè)置兩個(gè)值，如border-radius:iOpx 5px，第1個(gè)值代表左上圓角和右下圓角，第2個(gè)值代表右上圓角和左下圓角。
3.如果設(shè)置3個(gè)值，如border-radius:iOpx 5px ipx，第1個(gè)值代表左上圓角，第2個(gè)值代表右上圓角和左下圓角，第3個(gè)值代表右下圓角。
4.如果設(shè)置了4個(gè)值，如border-radius:iOpx 9px 8px 7px，4個(gè)值分別代表左上圓角、右上圓角、右下圓角和左下圓角。
5.也可以將4AI角拆分成4個(gè)單獨(dú)的屬|(zhì)生來設(shè)置：左上圓角, border-top-left-radius、右上圓角：border-top-right-radius右下圓角：border-bottom-right-radius，左F圓角：border-bottoln-left-radius。
如IE8及其以下版本瀏覽器就不能支持這種技術(shù)，所以在使用它的時(shí)候還要考慮到瀏覽器的兼容問題。
網(wǎng)站制作時(shí)如何設(shè)計(jì)圓角欄目
欄目圓角化是網(wǎng)上常見的以種美化網(wǎng)頁的方法，本例運(yùn)用上面介紹的圖片圓角化方法，通過設(shè)置個(gè)名為《X品文摘》的網(wǎng)頁，從而進(jìn)步講述css設(shè)置圖片的方法。本例的演示效果如圖5.55所示。
【操作步驟】
第1步，啟動(dòng)Dreamweaver，新建文檔，保存為index.html。
第2步，構(gòu)建網(wǎng)頁結(jié)構(gòu)。本例首先用<div>標(biāo)簽設(shè)置contaiuer容器，然后分別用<div>標(biāo)簽將頁面分為header和main兩部分。以下為部分代碼，完整代碼請參考本節(jié)示例源代碼。
在整體的container框架下，頁面分為header和maln兩部分。在header下，定義了<img>標(biāo)簽，用于設(shè)置banner圖片。在maln下，又分為4部分，分別定義了4個(gè)欄目。在lanmu標(biāo)簽中定義了每個(gè)欄目的具體內(nèi)容。每個(gè)欄目的顯示效果截圖如圖5.56所示。
網(wǎng)站設(shè)計(jì)實(shí)操效果圖5.56欄目截圖
如圖5.56如示，每個(gè)欄目是個(gè)<div>塊，在此塊下又分為兩部分，分別是headline和content，也就是圓角圖片和欄目的文字信息。好了，網(wǎng)站設(shè)計(jì)關(guān)于圖像以及圓角欄目的處理方法我們今天就分享到這里。深圳網(wǎng)站制作公司明天會(huì)繼續(xù)就本文后圓角欄目的實(shí)現(xiàn)操作案例未完步驟繼續(xù)介紹。如果您有不明白的也可以咨詢我們的在線客服。博納網(wǎng)絡(luò)編輯整理。
