中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

圓形盒模型 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 樣式:

好了，我們的第一個圓角矩形大功告成了！預(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 的顏色及背景色)

預(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 的顏色及背景色)

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

出處：譯言
責(zé)任編輯：bluehearts

上一頁 CSS Sprites + 圓角 [2] 下一頁 CSS Sprites + 圓角 [4]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。