带形状阴影的透明边框按钮：边框被:after伪元素遮挡问题求助

嘿，我来帮你搞定这个按钮边框被:after伪元素遮挡的问题！先理清楚你的核心需求：要做一个带按钮形状阴影的透明边框按钮，必须用border属性，阴影能超出边框范围，同时边框不能被遮挡对吧？

问题根源分析 #

你遇到的矛盾其实是堆叠上下文搞的鬼：

• 当给.toggle-button加z-index: 1时，按钮创建了自己的堆叠上下文，:after的z-index: -1会被限制在这个上下文里，处于按钮的背景和边框下方。但因为按钮背景透明，父容器的红色背景会透过来，要么让阴影看起来被遮挡，要么在某些浏览器里边框和阴影的堆叠顺序出问题。
• 移除z-index: 1后，在无背景的父容器里没问题，但有红色背景的父容器会把:after的阴影盖住，因为此时:after的z-index: -1会跑到父容器堆叠上下文的下方。

两种可行解决方案 #

方案一：移除按钮z-index，调整父容器堆叠上下文

这个方案更简洁，只需要给父容器加个position: relative，同时把:after的box-sizing改成border-box（让阴影和按钮尺寸完全匹配）：

.background-color { 
  background-color: red; 
  height: 250px; 
  width: 250px; 
  position: relative; /* 新增：让父容器创建堆叠上下文 */
}
.toggle-button { 
  padding: 10px 25px; 
  background-color: transparent; 
  border: 3px solid #000000; 
  position: relative; 
  /* 移除 z-index: 1 */
  top: 0; 
  left: 0; 
  transition: all .2s ease; 
}
.toggle-button:hover { 
  left: 4px; 
  top: 4px; 
}
.toggle-button:after { 
  background-color: #eeeeee; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 6px; 
  top: 6px; 
  z-index: -1; 
  content: ""; 
  box-sizing: border-box; /* 修改：让阴影和按钮的border-box尺寸一致 */
  transition: all .2s ease; 
}
.toggle-button:hover:after { 
  left:0px; 
  top: 0px; 
}

<div class="background-color"> 
  <button class="toggle-button">Toggle me</button> 
</div>

这样:after会乖乖待在按钮下方、父容器背景上方，边框自然显示在最上层，阴影也能超出边框范围。

方案二：保留按钮z-index，调整:after的堆叠层级

如果你因为其他需求必须保留按钮的z-index: 1，那把:after的z-index改成-2就行，同样记得调整box-sizing：

.background-color { 
  background-color: red; 
  height: 250px; 
  width: 250px; 
}
.toggle-button { 
  padding: 10px 25px; 
  background-color: transparent; 
  border: 3px solid #000000; 
  position: relative; 
  z-index: 1; /* 保留 */
  top: 0; 
  left: 0; 
  transition: all .2s ease; 
}
.toggle-button:hover { 
  left: 4px; 
  top: 4px; 
}
.toggle-button:after { 
  background-color: #eeeeee; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 6px; 
  top: 6px; 
  z-index: -2; /* 修改：让:after在按钮堆叠上下文的更底层 */
  content: ""; 
  box-sizing: border-box; /* 修改：匹配按钮尺寸 */
  transition: all .2s ease; 
}
.toggle-button:hover:after { 
  left:0px; 
  top: 0px; 
}

<div class="background-color"> 
  <button class="toggle-button">Toggle me</button> 
</div>

小补充 #

把box-sizing改成border-box是为了让阴影和按钮的完整尺寸（包括边框）完全一致，视觉效果更协调。如果你想要阴影比按钮大一圈，可以把:after的width和height改成calc(100% + 6px)，同时调整left和top为3px之类的数值，灵活调整就好~

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