微信小程序 css样式 : 书本页面立体样式 前大后小，自定义收缩高度

//小程序中:befor 跟 :after位置都在block2_1上面，befor最前，after中间
//网页中：block2_1在before跟after中间
//根据页面需求调大小，文本根据多少可自定义收缩高度

.block2_1{
  position:relative;
  width:92vw;
  min-height:21vh;
  height:auto;
  box-shadow:0.4px 3px 5px rgba(0,0,0,0.2);
  background:#fff;
  border-radius:10px;
  z-index:1;
  padding-bottom: 5vw;

}
.block2_1:before{  
    content:"";
    position:absolute;
    z-index:3;
    left:0;
    top:-6%;
    width:96%;
    height:112%;
    background:#fff;
    border-radius:10px;
    box-shadow:0.4px 3px 5px rgba(0,0,0,0.2);

}  
.block2_1:after {  
    content:"";
    position:absolute;
    z-index:-3;
    width:98%;
    height:106%;
    background:#fff;
    border-radius:10px;
    box-shadow:0.4px 3px 5px rgba(0,0,0,0.2);
    left:0;
    top:-3%;

} 
.block2_2{
  width:88vw;
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  min-height:21vh;
  height:auto;

}

html:

<view class='block2_1'>

        <view class='block2_2'>

             put your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your tips hereput your 
      view>
    view>