如何在網(wǎng)頁設(shè)計(jì)中設(shè)計(jì)圓角圖片

網(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í)候還要考慮到瀏覽器的兼容問題。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))