CSS3 PK Photoshop：圆角和框投影

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

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

准备工作

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

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

相关素材：https://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中，创建混合角的样式得花一点时间，因为它并没提供这样的结合方式。你只能手动增加会减少半径或结合图形，然后裁剪每个角。

CSS3制作圆角的优势

用CSS3代码取代传统的图形圆角是一个好注意。我们看看它的好处：

· 图片数量减少，HTTP请求服务器端的次数也相应减少。

· 它支持当下所有浏览器（IE6，IE7，IE8除外），还包括大多数移动浏览器。

· 只需在CSS文件中写上几句代码即可生效

· 增加/减少半径，改变大小，改变填充和边框等操作只需很少的时间，但在Photoshop中却要花更长时间。

下面是在HTML元素中用代码绘制一个圆角。

点击查看：演示地址

第二步：框投影

以前你可以用Photoshop的投影（Drop Shadows）和内阴影（Inner Shadow）制作一些非常酷的效果。方法得当的话还可制作出很棒的3D效果。当然，错误地使用投影或内阴影也可能快速制作出垃圾效果。

你可以实践以下这些的例子：

在CSS3中制作圆角

在CSS3中，你只需几行代码，就可制作出投影效果。负责实现该样式的属性是box-shadow。

为了创作出跟Photoshop相似的投影效果，你可以使用下面的语法：

box-shadow: ;

同样，产生类似的内阴影效果的语法见下：

box-shadow: inset ;

下面的代码是用来实现几种不同的框投影效果：

点击查看：演示地址

第三步：导航栏制作

我们要结合圆角，渐变填充以及框投影制作一个导航栏。你通常使用Photoshop创建一个图形，如果你愿意立刻开始，也可以从页面顶部下载源文件。

接下来，有趣的部分来了，我们要用CSS3得到（跟Photoshop）同样的效果。

首先，我使用了HTML的“nav”标签，这个标签非常酷，并且语法简单，但是你也可以使用div层来代替。

第四步：写CSS代码

现在我们跳转到CSS代码实现部分，首先，设置位置和高度。

然后进行渐变填充：

接下是，制作圆角：

最后，添加框效果：

点击查看：演示地址

第五步：去掉溢出颜色

最后一点需要注意的是，使用了填充和边框的圆角的会造成颜色溢出。你会在鼠标悬停在导航栏按钮时看到颜色溢出。

我们可以通过背景剪切属性进行修复，这取决于给定元素背景是否扩展了边框。默认是border-box，造成混乱得颜色溢出，但是我们可以把它改为padding-box，

把下面的CSS代码添加到按钮上：

当鼠标悬停时，得到更符合我们要求的效果：

总结

用CSS3创建一个漂亮的，简洁的导航栏比以前更简单，更快。下一次设计中赶紧试试吧。希望本教程对你有帮助，谢谢！

点击查看：演示地址

注明：本文由站长之家编辑编译，未经允许不得转载，如需转载请联系pj@chinaz.com。

（VIA：tutsplus 编译：jasming）