css实现折纸边缘阴影效果代码-html代码-BFW代码库

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;
  height:121px;
  border-radius:21px;
  background:#06D865;
  margin:50px 75px
}
.i1::before{
  content:"";
  position:absolute;
  width:231px;
  height:121px;
  border-radius:21px;
  background:#06D865;
  margin:90px 35px
}
.i1::after{
  content:"";
  position:absolute;
  width:251px;
  height:102px;
  border-radius:21px;
  background:#06D865;
  margin:182px -33px
}
.i2{
  position:absolute;
  width:192px;
  height:112px;
  border-radius:21px;
  background:#06D865;
  margin:291px 75px
}
.i2::before{
  content:"";
  position:absolute;
  width:231px;
  height:70px;
  border-radius:21px;
  background:#06D865;
  margin:90px 35px
}
.i2::after{
  content:"";
  position:absolute;
  width:251px;
  height:80px;
  border-radius:21px;
  background:#06D865;
  margin:152px -33px
}
.i3{
  position:absolute;
  width:212px;
  height:102px;
  border-radius:21px;
  background:#06D865;
  margin:201px 475px
}
.i3::before{
  content:"";
  position:absolute;
  width:231px;
  height:70px;
  border-radius:21px;
  background:#06D865;
  margin:90px 21px
}
.i3::after{
  conten.........完整代码请登录后点击上方下载按钮下载查看