🎊 纯 CSS「一行代码」呈现新拟态

<div class="container">
  <div class="soft-circle"></div>
  <div class="soft-circle soft-circle-outset"></div>
  <div class="soft-circle soft-circle-inset"></div>
  <div class="soft-circle soft-circle-inset-2"></div>
</div>

.container {
  background-color: rgb(235, 235, 255);
  padding: 50px;
}

.soft-circle {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  border-radius: 50px;
  box-shadow: -3px -3px 3px rgb(255, 255, 255), 5px 5px 5px rgb(210 210 240);
}

.soft-circle-outset {
   box-shadow: -8px -8px 8px rgb(255, 255, 255), 15px 15px 15px rgb(210 210 240);
}

.soft-circle-inset {
    box-shadow: -3px -3px 3px rgb(255, 255, 255) inset, 5px 5px 5px rgb(210 210 240) inset;
}

.soft-circle-inset-2 {
    box-shadow: -10px -10px 30px rgb(255, 255, 255) inset, 20px 20px 20px rgb(210 210 240) inset;
}