山顶角

来源：作者：chenzhe 出处：巧巧读书 2008-04-06 进入讨论组

关键词：
photoshop
css

灵活的变色龙

举例来说，如果我们有一个定义列表(<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 — 山坡形状的替换顶部图片(放大视图)