CSS3 PK Photoshop：圆角和框投影

本教程旨在教大家结合CSS3样式创建一个漂亮，简洁的导航栏。而在过去，我们只能借助图片，JavaScript和div层进行创作。

注意：下面所有的示例都是在Mozilla Firefox，Safari和Chrome中进行测试。你也可以再IE等非上述浏览器中测试一下实际效果。

准备工作

在网页设计的早期，外观漂亮，设计精美的导航栏就是保持网站条理清晰，结构良好的强有力元素之一。在过去，一个好的设计所用到的投影（shadow），渐变色（gradient），圆角（rounded corners）和鼠标悬停效果（hover）等都需要一系列的技巧，但这会增加代码和图片数量。

我们会在教程中深挖两个非常重要的CSS3效果：圆角和框投影（Box Shadows），另外，本文还会使用线性渐变（线性渐变已在此文进行过介绍CSS3 vs Photoshop – Complex Backgrounds）。

相关素材：http://webdesigntutsplus.s3.amazonaws.com/tuts/181_css3_vs_psd/Samples.zip

演示地址：https://webdesigntutsplus.s3.amazonaws.com/tuts/181_css3_vs_psd/Samples/Navigation_non_bleed/index2.html

第一步：圆角

大家都听说过圆角，我们就不具体讲述圆角该如何设计了。在接下来的例子中，我们着重讲述用Photoshop和CSS3实现圆角效果的差异。

用任何图形处理软件都能非常简单地创建一个圆角效果。但是在Photoshop中，我们会遇到以下问题：

精度问题：即便你设置了圆角半径，Photoshop内置的抗锯齿引擎通常还是会为图片增添多余的像素。过去，大多数人都必须得手动去掉这些影响圆角精度的像素，让图像的圆角处更加洁净，例如下图的红色的圆角出的多余像素。

编辑问题：这是创建圆角图形遇到的最大问题。如果你在Photoshop中创建了一个半径为10像素的圆角图形，但出于需要，你得把半径增加到20像素，除了重新拉伸图形，或手动编辑圆角外，没有其它办法，时间浪费了，并且又不精确。重定大小是一个大问题，如果你想拉伸或放大图形，你必须使用Photoshop中的锚点选择工具，因为使用自由变换（Transform Controls）可能导致圆角图形边缘失真。花在圆角切片上时间还没有包括在内。

填充和边框：对圆角框图形进行渐变填充往往是一项浩大的工程。没有覆盖边框，你还要准确地去掉相关图片的多余像素。你至少要为每个框创建3副图像，一个是顶部的圆角，另外是底部圆角，以及创建水平或垂直渐变，然后写代码。填充图片遇到的另一问题是，减小容器的高度和宽度，得到渐变色得到不合要求的效果。（见下图所示）

混合角样式：在Photoshop中，创建混合角的样式得花一点时间，因为它并没提供这样的结合方式。你只能手动增加会减少半径或结合图形，然后裁剪每个角。