欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  这是html部分:
 
  <divid="beauty-boxes">Someexampletext</div>
 
  CSS代码
 
  
 
  
 
  
 
  #beauty-boxes{
 
  transition:all0.5sease;
 
  position:relative;
 
  float:left;
 
  width:45%;
 
  padding:2px;
 
  margin:3px;
 
  background:#fff;
 
  -webkit-box-shadow:01px4pxrgba(0,0,0,0),0040pxrgba(0,0,0,0)inset;
 
  -moz-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0)inset;
 
  box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0)inset;
 
  -moz-border-radius:4px;
 
  border-radius:4px;
 
  }
 
  #beauty-boxes:before,
 
  #beauty-boxes:after{
 
  content:"";
 
  position:absolute;
 
  z-index:-3;
 
  bottom:15px;
 
  left:12px;
 
  width:50%;
 
  height:20%;
 
  max-width:350px;
 
  max-height:90px;
 
  -webkit-box-shadow:015px10pxrgba(0,0,0,0.7);
 
  -moz-box-shadow:015px10pxrgba(0,0,0,0.7);
 
  box-shadow:015px10pxrgba(0,0,0,0.7);
 
  -webkit-transform:rotate(-3deg);
 
  -moz-transform:rotate(-3deg);
 
  -ms-transform:rotate(-3deg);
 
  -o-transform:rotate(-3deg);
 
  transform:rotate(-3deg);
 
  }
 
  #beauty-boxes:after{
 
  right:10px;
 
  left:auto;
 
  -webkit-transform:rotate(3deg);
 
  -moz-transform:rotate(3deg);
 
  -ms-transform:rotate(3deg);
 
  -o-transform:rotate(3deg);
 
  transform:rotate(3deg);
 
  }.beauty-boxesp{
 
  font-size:16px;
 
  font-weight:bold;
 
  }
 
  #beauty-boxes:hover{
 
  background-color:#161616;
 
  color:#fff;
 
  }







本文转载自中文网
 

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