css实现折纸边缘阴影效果代码

代码语言:html

所属分类:布局界面

代码描述:css实现折纸边缘阴影效果代码

代码标签: 边缘 阴影 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body{
  background:black;
}
.contenedor{
  position:relative;
  width:800px;
  height:600px;
  background:white;
  margin:221px auto;
  overflow:hidden;
}
.mapa{
  position:absolute;
  margin:0 0px;
}
.rect1{
  position: absolute;
  height: 650px;
  width: 160px;
  background: #987654;
  opacity:.6;
}
.rect2{
  position: absolute;
  height: 650px;
  width: 160px;
  background: #FEE4C3;
  opacity:.5;
  margin:0 160px
}
.rect3{
  position: absolute;
  height: 650px;
  width: 160px;
  background: #CBBF97;
  opacity:.6;
  margin:0 320px
}
.rect4{
  position: absolute;
  height: 650px;
  width: 160px;
  background: #FEE4C3;
  opacity:.5;
  margin:0 480px
}
.rect5{
  position: absolute;
  height: 650px;
  width: 160px;
  background: #AC783C;
  opacity:.5;
  margin:0 640px
}
.cuadro{
  position:absolute;
  width:780px;
  height:580px;
  background:#5AD7E8;
  margin:0px 00px;
  border:9px solid white;
}
.i1{
  position:absolute;
  width:231px;
  heigh.........完整代码请登录后点击上方下载按钮下载查看

网友评论0