CSS 使用Sprites技術(shù)實(shí)現(xiàn)圓角效果
首先來(lái)簡(jiǎn)單說(shuō)一下什么是Sprites，Sprites是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。它允許你將一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來(lái)，當(dāng)訪問(wèn)該頁(yè)面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了。對(duì)于當(dāng)前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無(wú)需顧忌這個(gè)問(wèn)題。
第一步：創(chuàng)建我們的 Sprite
用PS等工具合成如圖所示的圖片（以一個(gè)像素的紅線來(lái)區(qū)分）
第二步：編寫(xiě)HTML代碼
首先，我們會(huì)給容器 div 一個(gè) .roundedBox類 :
復(fù)制代碼 代碼如下:
<div></div>
現(xiàn)在，我們必須再增加四個(gè)div ，這會(huì)在將來(lái)創(chuàng)建圓角的時(shí)候用到。之后必須給每個(gè)加載一個(gè)類 .corner，同時(shí)也標(biāo)識(shí)一個(gè)類來(lái)指定它們格子的位置。
復(fù)制代碼 代碼如下:
<div>
<strong>My content in roundedBox Type 1</strong>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
第三步：編寫(xiě)CSS樣式
絕對(duì)定位元素通常都依照相對(duì)定位的父元素進(jìn)行定位。如果這個(gè)父元素?zé)o法界定，那么它會(huì)去最近作相對(duì)定位的那個(gè)父元素，直至 body 標(biāo)簽。
讓我們先來(lái)定義下所有的圓角
所有的圓角都必須定義絕對(duì)定位，并且注明高度跟寬度。 我的圓角定義的寬度跟高度都是 17px.
復(fù)制代碼 代碼如下:
.corner{position:absolute;width:17px;height:17px;}
現(xiàn)在開(kāi)始定義 div 容器樣式:
復(fù)制代碼 代碼如下:
.roundedBox {position:relative;}
任何定義有類 .roundedBox 的元素內(nèi)，絕對(duì)定位元素都會(huì)相對(duì)于這個(gè)元素進(jìn)行定位，而不是標(biāo)簽 body。 我們也必須設(shè)置一些padding值，如果沒(méi)有設(shè)置，圓角將會(huì)覆蓋我們的文本，這肯定不是我們想要的效果。 重要提示: top 和 bottom padding 值必須 等價(jià)于圓角的 height。left 和 right padding 值必須等價(jià)于圓角的寬度。 正如您已經(jīng)知道的，我的圓角寬度跟高度是相等的，因此，四個(gè)邊角的padding 值也是相等的:
復(fù)制代碼 代碼如下:
.roundedBox {position:relative; padding:17px; margin:10px 0;}
讓我們對(duì)沒(méi)有圓角作單獨(dú)定義
我們會(huì)對(duì)每個(gè)圓角作絕對(duì)定位設(shè)置，并且定位背景圖的位置 (根據(jù)我們的 sprite):
復(fù)制代碼 代碼如下:
.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 匹配一個(gè)背景色，使之融合于 sprite 中的圓角:
復(fù)制代碼 代碼如下:
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}
全部的代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
.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 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}
</style>
</head>
<body>
<div id="type1">
<strong>My content in roundedBox Type 1</strong>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
相關(guān)文章：
1. CSS3中Transition屬性詳解以及示例分享2. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案3. css進(jìn)階學(xué)習(xí) 選擇符4. css代碼優(yōu)化的12個(gè)技巧5. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera6. 詳解CSS偽元素的妙用單標(biāo)簽之美7. CSS linear-gradient屬性案例詳解8. 討論CSS中的各類居中方式9. CSS單標(biāo)簽實(shí)現(xiàn)復(fù)雜的棋盤(pán)布局10. 通過(guò)CSS實(shí)現(xiàn)逼真水滴動(dòng)效
網(wǎng)公網(wǎng)安備