CSS Sprites + 圆角[译]（4）

模型 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。)

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

好了，这个就是截图效果。我们的边角还不能正确地覆盖 #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会需要更多的工作量，我们应该这样:

1. 修改上下边角的高度 (由渐变度决定(depending on your gradient))。

2. 修改上下边角的背景图定位 (由渐变度决定)。

3. 通过重复平铺 1px 的背景图片来创建容器 div 的渐变效果。

4. 值得注意的是，我们必须给内容设置一个大小，或者给容器设置一个最小高度(由渐变度决定)。

让我们开始吧。

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 代码：

我的渐变是从上到下垂直的。所以我们必须增加上边角的高度，以及更改下边角的背景图位置。当您看到我的新的 sprite 就会明白为什么会这么处理。就是下面这张:

我的div中的背景图片是这样的:

1px 的宽度，它的确是存在的。 我的下边角有一条实心颜色，刚好可以匹配div的背景色。 少说话多行动。我们来继续定义容器 div :

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}

给容器设置的背景颜色是我从底部边角中吸取的。然后将背景图片按 x 方向进行重复。最后我给它设置一个最小高度，正如我之前所说的，渐变才不会泄露。最后来加上所有的边角 (我将文件的类型修改为 .png 格式的图片，为的是能得到更好的渐变质量):

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}

现在，我增加上边角的高度 (这是由渐变最后抵达的颜色位置决定的):

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}

最后，我纠正下下边角的背景图定位:

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;}

全部完成! - 预览圆角矩形模型 5 (垂直渐变)

IE6 版本

这项技术在这一令人讨厌的浏览器中是有问题的。我们必须给容器 (.roundedBox, or #type1, #type2, 等等) 确定宽度跟高度。如果您没有定义它，那么它会泄露到盒模型之外。 使用 IE6 条件式注释法来定义它。

最后的想法

我希望这项技术对您会有帮组，并且不会显得太难。垂直渐变、透明的角落，只要多加练习，您的脑袋会变得更加好用，也会更加容易定义样式。