box-shadow

今天发现box-shadow是一个非常神奇的CSS属性，利用它我们可以干很多事情。
首先看一个栗子

    hello

#box1{
    width: 100px;
    height: 100px;
    background-color: red;
    box-shadow: 10px 10px 2px #eee;
}

结果：

从上述代码我们可以分析出来：
 第一个参数是x轴偏移量  第二个参数是y轴偏移量  第三个参数是模糊度（此参数越大，表示越模糊，此参数为0时，表示一点都不模糊）  第四个参数是阴影的颜色
这个栗子很平淡无奇，只能介绍一些基本的东西，无法显示box-shadow的强大之处，其实 box-shadow还可以接受一个参数，看下面的栗子

    world

}
#box2{
    width: 100px;
    height: 100px;
    border: 1px solid #eee;
    background-color: blue;
    box-shadow: 0 0 0 10px red;
}

看结果：

从结果中可以分析出来：在第三个模糊参数和第四个阴影颜色之间我们添加了一个参数，此参数表示的是扩展量。
此外， box-shadow还可以接收一组数据，利用这一特点，我们可以制作很多好玩的东西，看下面的栗子

    hello world

#box3{
    width: 100px;
    height: 100px;
    margin: 500px;
    /*border-radius: 10px 50px;*/
    background-color: #fff;
    box-shadow:
        0 0 0 10px #ccc,
        0 0 0 20px pink,
        0 0 0 30px yellow,
        0 0 0 45px red;
}

结果：

box-shadow还会随着圆角的变动一起变动
三条杠的效果

#box4{
    width: 400px;
    height: 3px;
    background-color: blue;
    box-shadow:0 7px 0 red, 0 -7px 0 yellow;
}