html div四边阴影效果

  1.  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
    <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
    <head>
  4.  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
    <title>无标题文档</title>
  6.  
    <style>
  7.  
    .shadow{
  8.  
    float:left;
  9.  
    margin-left:20px;
  10.  
    background: #EEFF99;
  11.  
    width:200px;
  12.  
    height:400px;
  13.  
    }
  14.  
    .shadow:hover{
  15.  
     
  16.  
    -webkit-box-shadow: #ccc 0px 10px 10px;
  17.  
    -moz-box-shadow: #ccc 0px 10px 10px;
  18.  
    box-shadow: #ccc 0px 10px 10px; }
  19.  
    </style>
  20.  
    </head>
  21.  
     
  22.  
    <body>
  23.  
    <div class="shadow"></div>
  24.  
    <div class="shadow"></div>
  25.  
    <div class="shadow"></div>
  26.  
    </body>
  27.  
    </html>
posted @ 2018-08-06 16:34  小平头~  阅读(2481)  评论(0)  编辑  收藏  举报