css3学习系列之box-shadow(1)

今天学习了关于css3的盒子阴影效果的box-shadow属性：

box-shadow的主要属性值有：

box-shadow:水平位移px 竖直位移px 模糊程度px 阴影颜色;

代码如下

<!doctype html>
  <html>
    <head>
        <meta charset="utf-8"/>
        <style>
           div{
                200px;
               height: 100px;
               margin: 100px 20px;
               background: #ccc;
               float: left;
           }
           div:nth-child(1){box-shadow:-10px -10px;}
           div:nth-child(2){box-shadow:10px -10px}
           div:nth-child(3){box-shadow:10px -10px 10px}
            div:nth-child(4){box-shadow:10px -10px 10px red}
        </style>
    </head>
    <body>
        <div>
            left-top
        </div>
        <div>
            left-top
        </div>
        <div>
            rouhe
        </div>
        <div>
            color
        </div>

    </body>
  </html>

if you don't try,you will never know!