求助：为clip-path椭圆伪元素添加box-shadow无效问题

DevOps 小满

2026-7-7

伪元素阴影不显示的解决方法

核心问题分析

父元素.ug-slick未设置position: relative，伪元素的绝对定位基准错误，位置会偏离预期
使用clip-path后，box-shadow会被一同裁剪——因为box-shadow属于元素盒模型的一部分，会跟着原始元素形状被clip-path切掉

解决方案：用`filter: drop-shadow()`替代`box-shadow`

drop-shadow是给元素的可见渲染区域添加阴影，不受clip-path的裁剪影响，能完美贴合裁剪后的形状。同时给父元素加上定位基准：

.ug-slick {
  position: relative; /* 新增：让伪元素相对父元素定位 */
  width: 800px;
  height: 500px;
}
.ug-slick::after {
  content: "";
  position: absolute;
  bottom: 8px;
  right: -5%;
  left: -5%;
  height: 60px;
  width: 110%;
  background: #F2F2F2;
  clip-path: ellipse(70% 50% at 50% 50%);
  filter: drop-shadow(0px 10px 5px black); /* 替换原box-shadow */
}