|
第二步：框投影
以前你可以用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
|
.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;}
点击查看：演示地址
|
