CSS使用Sprites技術(shù)實(shí)現(xiàn)圓角效果_經(jīng)驗(yàn)交流

第一步：創(chuàng)建我們的 Sprite

用PS等工具合成如圖所示的圖片（以一個像素的紅線來區(qū)分）

第二步：編寫HTML代碼

首先，我們會給容器 div 一個 .roundedBox類 :

代碼如下:

現(xiàn)在，我們必須再增加四個div ，這會在將來創(chuàng)建圓角的時候用到。之后必須給每個加載一個類 .corner，同時也標(biāo)識一個類來指定它們格子的位置。

代碼如下:

My content in roundedBox Type 1

第三步：編寫CSS樣式

絕對定位元素通常都依照相對定位的父元素進(jìn)行定位。如果這個父元素?zé)o法界定，那么它會去最近作相對定位的那個父元素，直至 body 標(biāo)簽。

讓我們先來定義下所有的圓角

所有的圓角都必須定義絕對定位，并且注明高度跟寬度。 我的圓角定義的寬度跟高度都是 17px.

代碼如下:
.corner{position:absolute;width:17px;height:17px;}

現(xiàn)在開始定義 div 容器樣式:

代碼如下:
.roundedBox {position:relative;}

任何定義有類 .roundedBox 的元素內(nèi)，絕對定位元素都會相對于這個元素進(jìn)行定位，而不是標(biāo)簽 body。 我們也必須設(shè)置一些padding值，如果沒有設(shè)置，圓角將會覆蓋我們的文本，這肯定不是我們想要的效果。 重要提示: top 和 bottom padding 值必須 等價于圓角的 height。left 和 right padding 值必須等價于圓角的寬度。 正如您已經(jīng)知道的，我的圓角寬度跟高度是相等的，因此，四個邊角的padding 值也是相等的:

代碼如下:
.roundedBox {position:relative; padding:17px; margin:10px 0;}

讓我們對沒有圓角作單獨(dú)定義

我們會對每個圓角作絕對定位設(shè)置，并且定位背景圖的位置 (根據(jù)我們的 sprite):

代碼如下:
.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

最后，給 #type1 匹配一個背景色，使之融合于 sprite 中的圓角:

代碼如下:
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}

全部的代碼：

代碼如下:









My content in roundedBox Type 1

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com