使用CSS Sprites技術畫圓角，簡單的講就是把一個圓做在一張圖上，定義4個p，每個p取圖的一個角做背景，下面看具體實現方法。
首先來簡單說一下什麼是Sprites，Sprites是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
第一步：建立我們的 Sprite
用PS等工具合成的圖片（以一個像素的紅線來區分）
第二步：編寫HTML代碼
首先，我們會給容器 p 一個 .roundedBox類 :
<p class="roundedBox"></p>
現在，我們必須再增加四個p ，這會在將來建立圓角的時候用到。之後必須給每個載入一個類 .corner，同時也標識一個類來指定它們格子的位置。
<p class="roundedBox"> <strong>My content in roundedBox Type 1</strong> <p class="corner topLeft"></p> <p class="corner topRight"></p> <p class="corner bottomLeft"></p> <p class="corner bottomRight"></p></p>
第三步：編寫CSS樣式
絕對位置元素通常都依照相對定位的父元素進行定位。如果這個父元素無法界定，那麼它會去最近作相對定位的那個父元素，直至 body 標籤。
讓我們先來定義下所有的圓角
所有的圓角都必須定義絕對位置，並且註明高度跟寬度。 我的圓角定義的寬度跟高度都是 17px.
.corner{position:absolute;width:17px;height:17px;}
現在開始定義 p 容器樣式:
.roundedBox {position:relative;}
任何定義有類 .roundedBox 的元素內，絕對位置元素都會相對於這個元素進行定位，而不是標籤 body。 我們也必須設定一些padding值，如果沒有設定，圓角將會覆蓋我們的文本，這肯定不是我們想要的效果。 重要提示: top 和 bottom padding 值必須 等價於圓角的 height。left 和 right padding 值必須等價於圓角的寬度。 正如您已經知道的，我的圓角寬度跟高度是相等的，因此，四個邊角的padding 值也是相等的:
.roundedBox {position:relative; padding:17px; margin:10px 0;}
讓我們對沒有圓角作單獨定義
我們會對每個圓角作絕對位置設定，並且定位背景圖的位置 (根據我們的 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><p class="roundedBox" id="type1"> <strong>My content in roundedBox Type 1</strong> <p class="corner topLeft"></p> <p class="corner topRight"></p> <p class="corner bottomLeft"></p> <p class="corner bottomRight"></p></p></body></html>
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
