css左侧投影_CSS3------box-shadow，即单边阴影效果设置

box-shadow修改元素的阴影效果要方便得多，因为box-shadow可以修改六个参数，得到不同的效果。下面结合一些简单的案例来对box-shadow属性进行演示说明。

1．单边阴影效果

定义元素的单边阴影效果和调协border的单边边框颜色是相似的，例如：

1

2

3

4

5

Title

6

7 .box-shadow{

8 width:200px;

9 height:100px;

10 border-radius:5px;

11 border:1px solid #ccc;

12 margin:20px;

13 }

14 .top{

15 box-shadow:0 -2px 0 red;

16 }

17 .right{

18 box-shadow:2px 0 0 green;

19 }

20 .bottom{

21 box-shadow:0 2px 0 blue;

22 }

23 .left{

24 box-shadow:-2px 0 0 orange;

25 }

26

27

28

29

30

31