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