第二步：框投影
以前你可以用Photoshop的投影（Drop Shadows）和内阴影（Inner Shadow）制作一些非常酷的效果。方法得当的话还可制作出很棒的3D效果。当然，错误地使用投影或内阴影也可能快速制作出垃圾效果。
你可以实践以下这些的例子：
在CSS3中制作圆角
在CSS3中，你只需几行代码，就可制作出投影效果。负责实现该样式的属性是box-shadow。
为了创作出跟Photoshop相似的投影效果，你可以使用下面的语法：
box-shadow: <xpos> <ypos> <size> <color>;
同样，产生类似的内阴影效果的语法见下：
box-shadow: inset <style> <xpos> <ypos> <size> <color>;
下面的代码是用来实现几种不同的框投影效果：
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/*Box shadows*/.dropshadow{ background-image:-moz-linear-gradient(top, #F3F4F5, #C8C9CA); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F4F5), to(#C8C9CA), color-stop(1,#C8C9CA)); border:2px solid #F2F2F2; box-shadow: 10px 10px 10px rgba(0,0,0,0.25); -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.25); -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);}.innershadow{ background-image:-moz-linear-gradient(top, #E2E2E2, #CCCCCC); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E2E2E2), to(#CCCCCC), color-stop(1,#CCCCCC)); border:2px solid #FEFEFE; box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25); -moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25); -webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);}.intenseshadow{ background-color:#FFF; border:1px solid #F00; box-shadow: 10px 10px 0px #F00; -moz-box-shadow: 10px 10px 0px #F00; -webkit-box-shadow: 10px 10px 0px #F00;}.bevel{ background-color:#CCC; box-shadow: 10px 10px 0px #F00; -moz-box-shadow:inset 0px 0px 120px rgba(0,0,0,.60); -webkit-box-shadow: 10px 10px 0px #F00;} |
点击查看：演示地址
第三步：导航栏制作
我们要结合圆角，渐变填充以及框投影制作一个导航栏。你通常使用Photoshop创建一个图形，如果你愿意立刻开始，也可以从页面顶部下载源文件。
接下来，有趣的部分来了，我们要用CSS3得到（跟Photoshop）同样的效果。
首先，我使用了HTML的“nav”标签，这个标签非常酷，并且语法简单，但是你也可以使用div层来代替。
|
01
02
03
04
05
06
07
08
09
10
|
<nav class="horizontal"> <ul> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Dolor Sit Amet</a></li> <li><a href="#">Sed do Eiusmod</a></li> <li><a href="#">Consectetur Adipisicing</a></li> <li><a href="#">Lipsum amet</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul></nav> |
（举报）
