听说code能改变world,所以就学了

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

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

box-shadow的主要属性值有:

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

代码如下

<!doctype html>
  <html>
    <head>
        <meta charset="utf-8"/>
        <style>
           div{
               width: 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>

 

posted @ 2013-11-16 13:53  李腾  阅读(197)  评论(0编辑  收藏  举报

如果我加了黑链呢:http://liteng.org