z-index
z-index属性设置元素的堆叠顺序，z-index的取值表示各元素之间的层次关系，值大者在上，当为负数时表示该元素位于页面之下
-
重点！！！
z-index仅能在定位元素上奏效，如：position：absolute；
box-shadow
-
box-shadow属性，向框添加一个或多个阴影
语法：
box-shadow: h-shadow v-shadow blur spread color inset；-
h-shadow：必须，水平阴影的位置，允许负值
-
v-shadow：必须，垂直阴影的位置，允许负值
-
blur：可选，模糊距离(模糊半径)
-
spread：可选，阴影的尺寸（扩张半径）
-
color：可选，阴影的颜色
-
inset：可选，将外部阴影改为内部阴影
-
-
只能有一个box-shadow属性，但是一个属性里可以有多个阴影，用逗号隔开。
-
然后就可以根据它的属性设置各种各样的阴影，如左阴影，右阴影，左右阴影，上下阴影等就不具体展示了
-
原本以为这个属性只能做一些简单的小背景，但是还是我太憨了，发现它可以做出许多许多的东西，边框，半透明遮罩层，甚至可以做立体投影，彩色投影等。这些就等我学习了之后再写写。
/* CSS Document */
.box{
600px;
height:300px;
margin:0 auto;
}
.left{
20%;
height:100%;
float:left;
background-color:#FFD266;
}
.center{
position:absolute;
360px;
height:300px;
background-color:#FFFFFF;
box-shadow:20px 0 20px -20px #000,-20px 0 20px -20px #000;
z-index:1;
margin-left:120px;
}
.right{
20%;
height:100%;
float:right;
background-color:#68B4FF;
}
box-shadow: h-shadow v-shadow blur spread color inset;由于阴影是左右阴影，所以只要给h-shadow水平阴影，而垂直阴影为0，但是因为只能有一个box-shadow，所以设置完一个阴影后逗号隔开再设置一个阴影。但是由于层次关系，有一边的阴影会被挡住，所以要用z-index使main到上面来，但是发现还是不行，查阅后发现z-index只能在定位元素上奏效，于是给main一个绝对定位，再调整一下位置，整个左右阴影就出来了。