精通CSS-山顶角

山顶角

山顶角（mountaintop corner）是一个简单但非常灵活的概念，是由www.simplebits.com的Dan Cederholm首创的，他是畅销图书Web Standards Solutions（friends of ED，2004）的作者。假设希望创建一系列具有不同颜色的圆角框。如果使用前面的方法，就必须为每种颜色方案创建不同的角图像。如果只有几个方案，那么这个方法也可以，但是，如果想让用户创建自己的颜色方案，那么该怎么办？可能必须在服务器上动态地创建角图像，这是非常复杂的。

幸运的是，有另一个办法。并不创建有颜色的角图像，而是创建曲线形的位图角蒙板（见图3-10）。蒙板区域盖住背景颜色，而角区域实际上是透明的。当放在有颜色的框上时，它们形成曲线形框的效果（见图3-11）。

图3-10  位图角蒙板。白色的蒙板将覆盖背景颜色，产生简单的曲线效果

图3-11  山顶角框

因为这些角蒙板是位图，所以对于小曲线效果最好。如果使用大曲线，那么它会出现锯齿，不好看。

基本的标记与前一个方法相似，它需要四个元素来应用四个角蒙板：

    <div class="box">
      <div class="box-outer">
      <div class="box-inner">
      <h2>headline</h2>
      <p>content</p>
      </div>
      </div>
    </div>

CSS也非常相似：

.box {
      width: 20em;
      background: #effce7 url(images/bottom-left.gif)
      no-repeat left bottom;
     }

除了使用不同的图像之外，主要的差异是在主框div上添加了背景颜色。如果要修改框的颜色，只需修改CSS中的颜色值，不必重新创建任何新图像。这个方法只适合创建非常简单的框；但是它提供了很大的灵活性，而且可以在不同的项目中重复使用。