首先來簡單說一下什么是Sprites，Sprites是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網絡流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
第一步：創(chuàng)建我們的 Sprite
用PS等工具合成如圖所示的圖片（以一個像素的紅線來區(qū)分）
第二步：編寫HTML代碼
首先，我們會給容器 div 一個 .roundedBox類 :
復制代碼 代碼如下:
div class="roundedBox">/div>
現(xiàn)在，我們必須再增加四個div ，這會在將來創(chuàng)建圓角的時候用到。之后必須給每個加載一個類 .corner，同時也標識一個類來指定它們格子的位置。
復制代碼 代碼如下:
div class="roundedBox">
strong>My content in roundedBox Type 1/strong>
div class="corner topLeft">/div>
div class="corner topRight">/div>
div class="corner bottomLeft">/div>
div class="corner bottomRight">/div>
/div>
第三步：編寫CSS樣式
絕對定位元素通常都依照相對定位的父元素進行定位。如果這個父元素無法界定，那么它會去最近作相對定位的那個父元素，直至 body 標簽。
讓我們先來定義下所有的圓角
所有的圓角都必須定義絕對定位，并且注明高度跟寬度。 我的圓角定義的寬度跟高度都是 17px.
復制代碼 代碼如下:
.corner{position:absolute;width:17px;height:17px;}
現(xiàn)在開始定義 div 容器樣式:
復制代碼 代碼如下:
.roundedBox {position:relative;}
任何定義有類 .roundedBox 的元素內，絕對定位元素都會相對于這個元素進行定位，而不是標簽 body。 我們也必須設置一些padding值，如果沒有設置，圓角將會覆蓋我們的文本，這肯定不是我們想要的效果。 重要提示: top 和 bottom padding 值必須 等價于圓角的 height。left 和 right padding 值必須等價于圓角的寬度。 正如您已經知道的，我的圓角寬度跟高度是相等的，因此，四個邊角的padding 值也是相等的:
復制代碼 代碼如下:
.roundedBox {position:relative; padding:17px; margin:10px 0;}
讓我們對沒有圓角作單獨定義
我們會對每個圓角作絕對定位設置，并且定位背景圖的位置 (根據(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);}
全部的代碼：
復制代碼 代碼如下:
!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>無標題文檔/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 class="roundedBox" id="type1">
strong>My content in roundedBox Type 1/strong>
div class="corner topLeft">/div>
div class="corner topRight">/div>
div class="corner bottomLeft">/div>
div class="corner bottomRight">/div>
/div>
/body>
/html>
您可能感興趣的文章:- CSS圓角區(qū)塊容器生成器
- CSS實現(xiàn)光滑圓角效果
- 用js實現(xiàn)CSS圓角生成更新
- 用js實現(xiàn)的抽象CSS圓角效果!!
- 純CSS生成抗鋸齒圓角的代碼
- css Sprites小實例代碼
- 提取自百度有啊的css圓角效果
- CSS+Jquery實現(xiàn)頁面圓角框方法大全
- JS+CSS實現(xiàn)可拖拽的漂亮圓角特效彈出層完整實例
- jQuery+html5+css3實現(xiàn)圓角無刷新表單帶輸入驗證功能代碼
- js+css實現(xiàn)的圓角邊框TAB選項卡滑動門代碼分享（2款）
- JS+CSS實現(xiàn)自適應選項卡寬度的圓角滑動門效果
- JS+CSS實現(xiàn)的經典圓角下拉菜單效果代碼
