CSS Sprites + 圆角_div+css教程(2)_H5之家 - 中国HTML5教程资源分享第一站

Rounded Box Type 1 Background Hexa Color

之后，通过定义 .corner 类来协助圆形盒模型载入 Sprite 样式:

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

Corner Type 1 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 的颜色及背景色)

Corner Type 2 Sprite

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

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

Corner Type 3 Sprite

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

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

模型4 跟模型1、2、3又有什么区别呢？边框和颜色，让我们来解决这些因素吧。

HTML 代码：

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

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

CSS 代码 (在 sprite 中给您的边角的边框都添上边框，并使 .roundedBox 类的背景及边框融合 sprite。)

Rounded Box Type 4 Background and border Hexa Color

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}

Corner Type 4 Sprite

好了，这个就是截图效果。我们的边角还不能正确地覆盖 #type4 边框。所以我们必须矫正它们的定位来覆盖早期的定位样式。让我们做到这一点:

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}
#type4 .topLeft {top:-1px;left:-1px;}
#type4 .topRight {top:-1px; right:-1px;}
#type4 .bottomLeft {bottom:-1px; left:-1px;}
#type4 .bottomRight {bottom:-1px; right:-1px;}

好了，这就是我们完成的模型 4。预览圆角矩形模型4 (红色边框). We are almost there, don’t quit now :p模型

5 (垂直渐变)

好了，模型5会需要更多的工作量，我们应该这样:

让我们开始吧。

HTML 代码 (跟之前的一样)：

<div class="roundedBox" id="type5">
<strong>My content in roundedBox Type 5</strong>
<div class="corner topLeft"></div>
<div class="corner topRight"></div>

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

CSS 代码：