欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  下面我们通过具体的boxshadow阴影效果实例代码,给大家详细的一一介绍:
 
  
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title>boxshadow阴影效果实例</title>
 
  <style>
 
  .demo1{
 
  width:100px;
 
  height:100px;
 
  background-color:#3262ff;
 
  box-shadow:5px5px5pxblack;
 
  }
 
  .demo2{
 
  margin-top:20px;
 
  width:100px;
 
  height:100px;
 
  background-color:#ccccff;
 
  box-shadow:5px5px5px5pxblack;
 
  }
 
  .demo3{
 
  margin-top:20px;
 
  box-shadow:8px8px8px-8pxblack;
 
  width:100px;
 
  height:100px;
 
  background-color:#1094f2;
 
  }
 
  .demo4{
 
  margin-top:20px;
 
  box-shadow:5px0px5px-5pxblack,-5px0px5px-5pxblack;
 
  width:100px;
 
  height:100px;
 
  background-color:#a7fcff;
 
  }
 
  .demo5{
 
  margin-top:20px;
 
  box-shadow:8px0px8px-8pxblack;
 
  width:100px;
 
  height:100px;
 
  background-color:#029789;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divclass="demo1">demo1</div>
 
  <divclass="demo2">demo2</div>
 
  <divclass="demo3">demo3</div>
 
  <divclass="demo4">demo4</div>
 
  <divclass="demo5">demo5</div>
 
  </body>
 
  </html>

d599293024e250b611d22bcc57a47d4.png

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56905.shtml