如何将内层div的box shadow移至父级div并控制阴影不溢出

一、修复box-shadow溢出问题 #

如果想继续用box-shadow实现波纹圆环，只需给父元素.ripple添加overflow: hidden裁剪溢出内容，同时调整.inner的位置使其居中：

.ripple {
  width: 400px;
  height: 80px;
  margin-top:40px;
  position:relative;
  background: red;
  border-radius: 10px;
  color: #fff;
  display: flex;
  justify-content:center;
  align-items: center;
  overflow: hidden; /* 裁剪超出父元素的阴影 */
}

.inner{
  display: block;
  position:absolute;
  width: 80px;
  height: 80px;
  background: #ff8895;
  box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.2), 0 0 0 70px rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  top: 50%; /* 居中定位 */
  left: 50%;
  transform: translate(-50%, -50%);
}

注：原代码中rgba(256,256,256,...)为错误写法，RGB值范围是0-255，已修正为255。

二、更可控的波纹圆环替代方案 #

若不想依赖overflow裁剪，推荐用以下两种方式实现，精准控制圆环显示范围：

方案1：径向渐变绘制多层圆环 #

用radial-gradient直接在容器中画出多层圆环，无需依赖阴影：

.inner{
  display: block;
  position:absolute;
  width: 220px; /* 核心圆直径80px + 两层圆环宽度各70px */
  height: 220px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    radial-gradient(circle, transparent 63px, rgba(255,255,255,0.2) 63px, rgba(255,255,255,0.2) 98px, transparent 98px),
    radial-gradient(circle, #ff8895 0 40px, transparent 40px);
}

方案2：伪元素叠加圆环 #

用两个伪元素作为外层圆环，避免单个元素阴影溢出：

.inner{
  display: block;
  position:absolute;
  width: 80px;
  height: 80px;
  background: #ff8895;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.inner::before, .inner::after{
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.inner::before{
  width: 150px; /* 80px + 35px*2 */
  height: 150px;
  border: 35px solid rgba(255,255,255,0.2);
}
.inner::after{
  width: 220px; /* 80px + 70px*2 */
  height: 220px;
  border: 70px solid rgba(255,255,255,0.2);
}

三、小图形代码优化建议 #

当前每个小图形用单独类名过于冗余，可改用通用类+CSS变量简化：

<div class="dot" style="--size:24px;--top:-10px;--left:5px;--opacity:0.5;"></div>
<div class="dot" style="--size:12px;--top:35px;--left:25px;--opacity:0.3;"></div>
<!-- 其余小图形依此类推 -->

.dot{
  width: var(--size);
  height: var(--size);
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  top: var(--top);
  left: var(--left);
  background: black;
  opacity: var(--opacity);
}

内容的提问来源于stack exchange，提问作者Atal Shrivastava