圓形盒模型 1 (藍色)

 HTML 代碼：

<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>

我們必須給容器 div 定義一個ID為 #type1，用來實施特殊背景。

CSS 代碼：

首先，我們得給 #type1 匹配一個背景色，使之融合于 sprite 中的圓角:

#type1 {background-color:#CCDEDE;}

之后，通過定義 .corner 類來協(xié)助圓形盒模型載入 Sprite 樣式:

#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../images/corners-type1.gif);}

好了，我們的第一個圓角矩形大功告成了！預(yù)覽圓角矩形模型1 (藍色)

圓形盒模型 2 (綠色) / 圓形盒模型 3 (紫色)

模型1，模型2跟模型3的唯一差別就是它們的顏色，所以我們也僅僅只修改這些。

模型 2 (綠色)

HTML 代碼：

<div class="roundedBox" id="type2">
<strong>My content in roundedBox Type 2</strong>

<div class="corner topLeft"></div>
<div class="corner topRight"></div>
<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div>

CSS 代碼 (僅僅修改 sprites 的顏色及背景色)

#type2 {background-color:#CDDFCA;}
#type2 .corner {background-image:url(../images/corners-type2.gif);}

預(yù)覽圓角矩形模型2 (綠色)

模型 3 (紫色)

HTML 代碼：

<div class="roundedBox" id="type3">
<strong>My content in roundedBox Type 3</strong>
<div class="corner topLeft"></div>

<div class="corner topRight"></div>
<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div>

CSS 代碼 (僅僅修改 sprites 的顏色及背景色)

#type3 {background-color:#D3CADF;}
#type3 .corner {background-image:url(../images/corners-type3.gif);}

預(yù)覽圓角矩形模型 3 (紫色). 都學(xué)會了嗎？好，現(xiàn)在我們再進一步學(xué)習(xí)。

最新評論