陰影製作效果 CSS+DIV

來源:互聯網
上載者:User

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" target="_blank">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"  >
<head>
<style>
#w{}{ width:200px; font-size:12px; margin-left:auto; margin-right:auto;}
.ac {}{
  display:block; 
  background:#bbbbbb; 
  border:1px solid #dddddd; 
  position:relative;
  margin:1px 0;
  }
.bc {}{
  display:block; 
  background:#777777; 
  border:1px solid #999; 
  position:relative;
  padding:1px;
  margin:1px;
  }
.cc {}{
  text-align:center; 
  background:#ffffff; 
  border:1px solid #555; 
  position:relative; 
  padding:5px;
  font-weight:normal;  }

.dc{}{
 background-color: #CCCCCC;
 border: 1px solid #999999;
}
</style>
</head>
<body>
<div id="w">
  <div class="ac">
    <div class="bc">
      <div class="cc">
        <div class="dc">
          <p>這是一張圖片</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.