SOURCE

console 命令行工具 X clear

                    
>
console
<div class="container">
    <div class="box shadow1">shadow1</div>
    <div class="box shadow2">shadow2</div>
    <div class="box shadow3">shadow3</div>
    <div class="box shadow4">shadow4</div>
    <div class="box shadow5">shadow5</div>
    <div class="box shadow6">shadow6</div>
    <div class="box shadow7">shadow7</div>
</div>
/* 
    具体参考:https://www.html.cn/archives/9360/

    box-shadow:
 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #2ec194;
}
.container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.container .box {
    position: relative;
    width: 300px;
    height: 200px;
    /* margin: 40px 0; */
    background: #fff;
    font-family: consolas;
    font-size: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, .1);
    margin: 40px 10px;
}

.container .box.shadow1 {
    /* x坐标值,y坐标值,模糊程度 颜色 */
    box-shadow: -30px 30px 20px rgba(0,0,0,.3);  
}

.container .box.shadow2::before {
    content:'';
    position: absolute;
    bottom: 10px;
    left: 10%;
    width: 90%;
    height: 50px;
    background: rgba(0,0,0,.3);
    transform-origin: left;
    transform: skewY(5deg);
    z-index: -1;
    filter: blur(5px); 
}

.container .box.shadow3::before{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 50%;
    height: 30px;
    background: rgba(0, 0, 0, 0.3);
    transform-origin: right;
    transform:skewY(-8deg);
    z-index: -1;
    filter: blur(10px);
}


.container .box.shadow3::after{
  content: '';
  position: absolute;
  bottom: 0px;
  right: 0;
  width: 50%;
  height: 30px;
  background: rgba(0, 0, 0, 0.3);
  transform-origin: left;
  transform:skewY(8deg);
  z-index: -1;
  filter: blur(10px);
}

.container .box.shadow4::before{
  content: '';
  position: absolute;
  bottom: -50px;
  left: 5%;
  width: 90%;
  height: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  z-index: -1;
  filter: blur(10px); 
}

.container .box.shadow5::before{
  content: '';
  position: absolute;
  bottom: -15%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
  filter: blur(10px);
}

.container .box.shadow6{
  background: #2ec194;
  border-radius: 15px;
  box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2),
              15px 15px 15px rgba(0, 0, 0, 0.1);
}

.container .box.shadow7{
  background: #2ec194;
  border-radius: 15px;
  box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2),
              15px 15px 15px rgba(0, 0, 0, 0.1),
              inset -5px -5px 5px rgba(255, 255, 255, 0.2),
              inset 5px 5px 5px rgba(0, 0, 0, 0.1); 
}