box-shadow多用

1. 在盒子底部实现圆形阴影效果

这里主要用到了伪元素、阴影

<div class="box"></div>

 .box{
      padding: 30px;
      background: white;
      border-radius: 5px;
      width: 400px;
      height: 200px;
      margin: auto;
      box-shadow: 0 0 5px rgba(0, 0, 0, .1);
      position: relative;
    }

 .box:after {
       content: " ";
       position: absolute;
       width: 65%;
       height: 50px;
       border-radius: 50%;
       left: 50%;
   	   transform: translateX(-50%);
       bottom: 3px;
       box-shadow: 0 16px 19px rgb(0 0 0 / 56%);
       z-index: -1;
    }

2. 悬浮

主要用到了hover

<div class="box"></div>


 .box{
      padding: 30px;
      background-color: #8bc34a;
      border-radius: 5px;
      width: 400px;
      height: 200px;
      margin: auto;
      /* transition: all .2s linear; */
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        }
.box:hover{ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}

3. 光环

主要用到了animation

<span class="pulse"></span>


 .pulse {
      margin: 100px;
      display: block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #cca92c;
      cursor: pointer;
      1px 20px #3B3B3B; */
      animation: pulse .9s infinite;
    }

    /* .pulse:hover {
      animation: none;
    } */

 @keyframes pulse {
      0% {
        box-shadow: 0 0 0 5px rgba(204, 169, 44, 0.55);
      }
      
      20% {
        box-shadow: 0 0 0 8px rgba(204, 169, 44, 0.5);
      }
      
      40% {
        box-shadow: 0 0 0 11px rgba(204, 169, 44, 0.3);
      }

     70% {
        box-shadow: 0 0 0 15px rgba(204, 169, 44, 0.2);
      }

      100% {
        box-shadow: 0 0 0 20px rgba(204, 169, 44, 0.05);
      }
    }

4. 按键效果

主要用到了transition和transform

<div class="button">按键</div>

.button{
      margin: 20px auto;
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: #fff;
      border-radius: 10%;
      background-color: #34a117;
      box-shadow: 0 10px 0 #3e4b28, 0 10px 10px #3e4b28;
      transition: transform .2s, box-shadow .2s;
      cursor: pointer;
      caret-color: rgba(0, 0, 0, 0)  //屏蔽鼠标点击出现的竖线
    }

 .button:active {
      transform: translateY(4px);
      box-shadow: 0 5px 0 #3e4b28, 0 5px 6px #3e4b28;
    }

5. 彩虹

<div class="rainbow"></div>

 .rainbow {
 	  margin：50px
      transform: rotate(45deg);
      width: 70px;
      height: 70px;
      border-radius: 100px 0 0 0;
      box-shadow:
        -2px -2px 0 1px #F44336,
        -4px -4px 0 3px #FF9800,
        -6px -6px 0 5px #FFEB3B,
        -8px -8px 0 7px #8BC34A,
        -10px -10px 0 9px #00BCD4,
        -12px -12px 0 11px #2196F3,
        -14px -14px 0 13px #7e7c7e;
    }

6. 云朵

<div class="cloud"></div>

<style>
  .cloud {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
      65px -15px 0 -5px #fff,
      25px -25px #fff,
      30px 10px #fff,
      60px 15px 0 -10px #fff,
      85px 5px 0 -5px #fff,
      35px -35px #c8c8c8,
      66px -27px 0 -5px #c8c8c8,
      91px -10px 0 -8px #c8c8c8;
  }
</style>

参考：https://juejin.cn/post/6877448842749575182#comment