47.纯 CSS 创作一个蝴蝶标本展示框

html,body{
  margin: 0;
  padding: 0;
}
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(gray, lightyellow,gray);
}
.butterfly{
  position: relative;
  width: 10em;
  height: 10em;
}
.butterfly::before,
.butterfly::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
}
.butterfly::before{
  width: 24em;
  height: 18em;
  background-color: black;
  top: -2.5em;
  left: -8em;
  /* inset： 插入 */
  border: inset 0.2em silver;
}
.butterfly::after{
  width: 40em;
  height: 30em;
  background-color: lightyellow;
  top: -9em;
  left: -16em;
  z-index: -1;
  border: 2em solid burlywood;
  border-radius: 3em;
  box-shadow: 
        0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3),
        inset 0.4em 0.4em 0.1em 0.5em rgba(0, 0, 0, 0.4);
}
.butterfly .left,
.butterfly .right{
  position: absolute;
  width: inherit;
  height: inherit;
}
.butterfly .right{
  transform: rotateY(180deg) rotate(-90deg);
  top: 0.4em;
  left: 0.4em;
}
.butterfly span{
  position: absolute;
  border-radius: 50%;
}
.butterfly span:nth-child(1){
  width: 5em;
  height: 7em;
  background-color: gold;
}
.butterfly span:nth-child(2){
  width: 5.5em;
  height: 3.5em;
  background-color: orangered;
  filter: opacity(0.6);
  top: 5em;
  left: -2.5em;
}
.butterfly span:nth-child(3){
  width: 6em;
  height: 6em;
  border-right: 0.3em solid orangered;
  top: -0.5em;
  
}

 

原文地址：https://segmentfault.com/a/1190000015236585

感想：遇到一个新东西-》/* inset： 插入 */    border: inset 0.2em silver;

HTML code:

<div class="butterfly">
  <div class="left">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="right">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

CSS code: