本教程旨在教咱们结合CSS3款式创立一个美丽，简练的导航栏。而在曩昔，咱们只能借助图片，JavaScript和div层进行创造。

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

准备工作

在网页规划的早期，外观美丽，规划精美的导航栏便是保持网站条理清晰，结构良好的强有力元素之一。在曩昔，一个好的规划所用到的投影（shadow），突变色（gradient），圆角（rounded corners）和鼠标悬停作用（hover）等都需求一系列的技巧，但这会添加代码和图片数量。

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

第一步：圆角

咱们都听说过圆角，咱们就不具体叙述圆角该如何规划了。在接下来的例子中，咱们着重叙述用Photoshop和CSS3实现圆角作用的差异。

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

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

编辑问题：这是创立圆角图形遇到的最大问题。假如你在Photoshop中创立了一个半径为10像素的圆角图形，但出于需求，你得把半径添加到20像素，除了从头拉伸图形，或手动编辑圆角外，没有其它方法，时刻浪费了，并且又不准确。重定大小是一个大问题，假如你想拉伸或扩大图形，你有必要运用Photoshop中的锚点挑选工具，由于运用自在改换（Transform Controls）可能导致圆角图形边际失真。花在圆角切片上时刻还没有包括在内。

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

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