山顶角教程实例

更新时间：2008-04-04参与评论

山顶角虽然是比较老的技术了，《精通CSS》一书中也有所介绍。这篇文章的原作者是 Dan Cederholm，他同时也是Faux Column的发明者，《无懈可击的Web设计》一书的作者，以及simplebits的站长。

翻译注释：原文中的"box"一律翻译为“盒子”。文中提到TRON一词，我也没搞清是什么意思，呵呵

一个平庸的盒子，每个角上都删去了一像素。当我们以100%的比例观察的时候，会感觉这个盒子好像有那么一点点圆。在TRON成为尖端技术之后，这就成了其中的一个技巧。

更少像素 = 更圆

你可以让圆角的幻觉更大一些，只要再删掉几个像素来创建“山顶”(你肯定觉得这是个不折不扣的白痴题目)。看看图片2，一个盒子变焦的放大视图，边角上被删去了好几像素以形成一个尖突的，有角度的区域。在100%大小观察的时候，边角就会显得很圆。

如果背景色很浅，你可以再多删去一些像素使得圆角的效果更加明显。像之前那样制作一个尖突的有角度区域，然后再在每一侧都多去掉一像素，我们就可以 让边缘再圆滑一些(见图3)。当山顶在三层以上时，我们常常需要这附加的一像素。而且在盒子的背景颜色很浅的时候，这一个像素对盒子与整个页面背景色的融 合也是很合适的。

透明的山峰

到了这里，你可能要说：“Dan(本文作者)，这真是一个太简单的技巧了。”没错，的确简单。但是精髓并不在这，而在于当我们需要圆角的时候，我们可以使用铅笔工具来创建大小和颜色都可以改变的盒子与边框。(而且有一些人在刮像素的时候会有莫名的快感……)

由于山顶角只利用两种颜色，我们可以把其中一种设为透明，使得山顶的颜色与网页的背景颜色相同，从而创造出圆角的效果。

灵活的变色龙

举例来说，如果我们有一个定义列表(<dl>)，把上下两侧都设置一个透明的背景图片以实现圆角效果。我们之后就可以通过设置CSS的background-color来改变整个盒子的外观了。

符合语义的代码应该像下面这样：

<dl>
<dt>Mt. Everest</dt><dd>The tallest mountain in the world.</dd><dd>29,035 feet</dd>
</dl>

当然了，你也可以用你喜欢的任何结构，但是定义列表结构给了我们足够多的元素来定义CSS。

下一步，我们将创建一个240像素宽的图像来作为圆角盒子的顶部。这个图像的高度会正好能够包含左右两侧的白色顶角，其余的部分定义为透明(这样CSS定义的背景色就能够穿过图片显示了。)图4为这张图片压缩并且放大之后的结果，这样我们就可以观察到图像的细节。

图4 — 放大的顶部图像

我们再来做一张相似的图片，垂直翻转上一张图片，就可以得到下面的圆角了。在Photoshop中最简单的方法就是选择Image >> Rotate Canvas >> Flip Canvas Vertical 。

把顶部图像设置为<dt>元素的背景，把底部图像设置为整个<dl>的背景，我们就拥有了一个(固定宽度的)可以根据内容多少或是字体大小伸缩的圆角盒子。

dl{width:240px;margin: 0 0 20px 20px;background: #999 url(box_bottom.gif) no-repeat bottom left;}
dt{margin: 0;padding: 10px;background: #999 url(box_top.gif) no-repeat top left;}
dd{margin: 0;padding: 10px;}

你会注意到，在定义<dl>和<dt>元素的背景颜色和背景图片的时候我都使用了缩略的方法。等一会儿我们在多种颜色混用的时候你就会了解这样定义的好处了。

这个例子展示了上面的CSS代码如何给盒子的上下两端设置背景图片，并且给盒子设置一个背景色，让它穿过图片的透明部分。我还给字体设置了一些样式属性，并且给每一个<dd>元素的左侧都添加了一个修饰性的箭头。

试着增大文字的大小，看看示例页面中的盒子是如何跟着文字的大小而伸缩的。

爬的更高

我们可以做的更漂亮一些，只需给<dl>和<dt>元素设置不同的背景颜色。这个例子展示了如何用相同的标签和图片实现两个不同的背景颜色，外加<dt>元素的白色底部边框(border-bottom)。

而且，我们并没有被局限于使用圆角。只要我们坚持创建双色GIF的原则，我们就可以给盒子的一侧加上任何形状的背景图片。这个最后的例子中，我们为盒子的底部使用了一张新的图片，加上了一个有褐色轮廓的白色山顶(见图5)。

图5 — 山坡形状的替换顶部图片

总结

由于元素的背景图像(background-image)在背景色(background-color)之上，我们就可以利用这一点来创建透明的GIF图片以实现圆的或其它形状的边角和边框。将这些修饰性的图片与CSS配合，我们就能得到一个颜色可以根据一条简单的CSS规则而改变的灵活容器。