如何实现无重叠阴影？胶囊元素覆盖圆形时阴影互不影响

我来帮你搞定这个问题！先梳理下核心痛点：当胶囊元素（pill）悬停移动覆盖圆形元素（circle）时，两个元素的阴影会叠加变深，而你想要阴影互不干扰、保持各自的透明效果；另外你之前用transition做动画没生效，咱们也一起解决。

问题根源&解决方案 #

1. 先搞定transition无效的问题

你之前用transition没效果，是因为没给pill设置初始的right值——CSS没法从默认的auto过渡到具体数值（58px）。只需要给pill加上初始right: 0，再用transition替代@keyframes，动画就能平滑运行了。

2. 解决阴影叠加的问题

默认的box-shadow是元素的"固有阴影"，哪怕元素被覆盖，阴影依然会完整显示，导致重叠部分颜色变深。改用filter: drop-shadow()就能解决：它会根据元素的可见轮廓生成阴影，当元素被遮挡时，被盖住的部分阴影会自动隐藏，不会和其他元素的阴影叠加，完美满足你"阴影互不影响"的需求。

修改后的完整代码 #

CSS 部分

body { 
  background-color: aqua; 
} 

#circle1, #circle2 { 
  position: relative; 
  float: left; 
  height: 50px; 
  width: 50px; 
  border-radius: 25px; 
  margin-left: 8px; 
  /* 用drop-shadow替代box-shadow，避免阴影叠加 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.19));
  z-index: 0; 
  background-color: white; 
} 

#pill1, #pill2 { 
  position: relative; 
  float: left; 
  height: 50px; 
  width: 100px; 
  border-radius: 25px; 
  margin-left: 8px; 
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.19));
  z-index: 1; 
  background-color: white; 
  right: 0; /* 设置初始right值，让transition生效 */
  transition: right 0.5s linear; /* 改用transition实现平滑动画 */
} 

#pill2 { 
  filter: drop-shadow(0 4px 8px rgba(180, 180, 180, 1)) drop-shadow(0 6px 20px rgba(200, 200, 200, 1));
} 

#circle2 { 
  filter: drop-shadow(0 4px 8px rgba(180, 180, 180, 1)) drop-shadow(0 6px 20px rgba(200, 200, 200, 1));
} 

#pill1:hover, #pill2:hover { 
  right: 58px; 
}

HTML 部分

<div id="circle1"></div> 
<div id="pill1"></div> 
<div id="circle2"></div> 
<div id="pill2"></div>

兼容旧版浏览器的备选方案 #

如果需要兼容IE这类不支持drop-shadow的浏览器，可以用JS控制阴影显示：

const pill1 = document.getElementById('pill1');
const circle1 = document.getElementById('circle1');
const pill2 = document.getElementById('pill2');
const circle2 = document.getElementById('circle2');

// 悬停时隐藏对应圆形的阴影
pill1.addEventListener('mouseenter', () => circle1.classList.add('hide-shadow'));
pill1.addEventListener('mouseleave', () => circle1.classList.remove('hide-shadow'));
pill2.addEventListener('mouseenter', () => circle2.classList.add('hide-shadow'));
pill2.addEventListener('mouseleave', () => circle2.classList.remove('hide-shadow'));

再给CSS加个类：

.hide-shadow {
  box-shadow: none !important;
}

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