box-shadow

写一个小例子，给一个盒子添加一个翘边的阴影

大概就是这样，代码如下

<style type="text/css">
.box {
    display: inline-block;
    *display: inline;
    width: 200px;
    height: 248px;
    margin: 20px;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 8px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 8px rgba(0, 0, 0, 0.06); 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 8px rgba(0, 0, 0, 0.06);
    position: relative;
    *zoom: 1;
}

.box:before {
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg);
    left: 15px;
}
.box:after {
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg);
    right: 15px;
}

.box:before, .box:after {
    width: 70%;
    height: 55%;
    content: ' ';    
    -webkit-box-shadow: 0 16px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 16px 8px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 16px 8px rgba(0, 0, 0, 0.3);  
    position: absolute;
    bottom: 10px;
    z-index: -1;        
}
</style>

<div class="box"></div>

具体实现原理，就是给.box添加两个旋转的盒子，再给添加的两个盒子添加阴影

先粘一个他的属性

如果有三个值的话，就省略了blur这个值了，我以前知道的box-shadow只有一个值，其实，可以跟很多值，多重阴影

img{box-shadow:-10px 0 10px red,
    10px 0 10px blue,
    0 -10px 10px yellow,
    0 10px 10px green;}

显示的效果是，左边阴影红色（因为他的x轴是-10），右边是蓝色（因为他的x轴是10），上面是黄色（因为他的Y轴是-10），下边是绿色（因为他的Y轴是10）

另外当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层。

 

--最近解决了一个问题，就是单侧阴影--

如果你想做成这样的阴影怎么办，以前我可是死活没做出来

只有下面有阴影，其实很简单

box-shadow: 0 15px 4px -4px black;

就是把模糊尺寸变成负值而已