css3 box-shadow给圆添加阴影

我们在画圆形的时候，可能希望给元素添加一点点阴影效果，这里使用黑色的背景，好看清阴影的颜色，实际项目，可以去掉背景色

简单使用

<style>
    body {
      background: #000;
    }

    .outer {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      box-shadow: 0px 36px 40px 0px rgba(122, 178, 15, 0.6);
      // 添加过渡
      transition: transform 0.5s;
       overflow: hidden;
    }
    
    // 添加缩放，更改外阴影
    .outer:hover {
      transform: scale(1.3);
      box-shadow: 0px 0px 50px 2px rgba(234, 98, 112, 0.9);
      transition: transform 0.5s;
    }
    
    // 保证里面的图片撑满父元素
    .outer img {
      width: 100%;
      height: 100%;
    }
  </style>

<div class="outer">
    <img
      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592825277822&di=4d954f0b1c0b9ab0355a0d8d43504938&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D3571592872%2C3353494284%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1200%26h%3D1290"
      alt="">
  </div>

发光球体

添加一个纯色背景，这种外发光和内发发光效果比较好看， box-shadow 是可以给多个值的

.parent {
  width: 400px;
  height: 400px;
  background: #000;
}
.bilibilin {
  // 居中在父元素中
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  width: 200px;
  height: 200px;
  border-radius: 50%;
  // 发光
  box-shadow: inset 0px 0px 50px #fff,
    inset 10px 0px 80px #f0f,
    inset -10px 0px 80px #0ff,
    inset 10px 0px 180px #f0f,
    inset -10px 0px 180px #0ff,
    0px 0px 50px #fff,
    10px 0px 50px #0ff,
    -10px 0px 50px #f0f;
}

<div class="parent">
    <div class="bilibilin"></div>
</div>