圆形盒模型 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 类来协助圆形盒模型载入 Sprite 样式:

好了，我们的第一个圆角矩形大功告成了！预览圆角矩形模型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 的颜色及背景色)

预览圆角矩形模型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 的颜色及背景色)

预览圆角矩形模型 3 (紫色). 都学会了吗？好，现在我们再进一步学习。

出处：译言
责任编辑：bluehearts

上一页 CSS Sprites + 圆角 [2] 下一页 CSS Sprites + 圆角 [4]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。