精通CSS:山顶角与阴影

 3.2.2  山顶角

    山顶角（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中的颜色值，不必重新创建任何新图像。这个方法只适合创建非常简单的框；但是它提供了很大的灵活性，而且可以在不同的项目中重复使用。

    3.3  阴影

    阴影是一种很流行、很有吸引力的设计特性，它给平淡的设计增加了深度，形成立体感。大多数人使用Photoshop这样的图形软件直接给图像添加阴影。但是，可以使用CSS产生简单的阴影效果，而不需要修改底层的图像。

    这么做有几个原因。例如，你可能让非技术人员管理站点，而他不会使用Photoshop，或者要从无法使用Photoshop的地方（比如网吧）上载图像。通过使用预定义的阴影样式，只需上载常规图像，它在站点上就会带着阴影显示。

    使用CSS的最大好处之一是灵活性。如果以后想去掉阴影效果，那么只需要在CSS文件中修改几行代码，而不必重新处理所有图像。