如何避免btn-play按钮的border-radius影响内部Font Awesome图标？

我来帮你搞定这个痛点！问题的根源在于：当你给.btn-play按钮设置border-radius: 50%时，按钮默认（或你主动设置）的overflow: hidden会把内部图标超出圆角的部分给裁切掉，导致图标边角变圆。要两全其美，我们需要把按钮的圆形外观和内部图标的显示逻辑分开，不让图标被裁切。

下面给你两种实用的解决方案：

方案一：用伪元素实现圆形背景（推荐） #

这种方法不需要额外的HTML元素，用按钮的伪元素来绘制圆形的背景和边框，图标直接放在按钮里，完全不会被裁切。

.btn-play {
  position: relative;
  /* 去掉按钮本身的圆角和溢出隐藏 */
  border-radius: 0;
  overflow: visible;
  /* 按钮基础尺寸 */
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
  /* 让图标居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 伪元素作为圆形背景层 */
.btn-play::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 自定义背景色 */
  background: #2563eb;
  /* 如果需要边框的话 */
  border: 2px solid #1d4ed8;
  /* 把背景放在图标下面 */
  z-index: -1;
}

/* 图标保持锐利边角 */
.btn-play i {
  font-size: 24px;
  color: #fff;
}

方案二：给图标套一个子容器 #

如果你不想用伪元素，也可以给图标加一个外层容器，按钮保留border-radius: 50%但去掉overflow: hidden，这样按钮的圆角只是视觉上的背景效果，不会裁切内部的图标容器。

HTML结构：

<button class="btn-play">
  <div class="icon-wrapper">
    <i class="fa-solid fa-play"></i>
  </div>
</button>

CSS样式：

.btn-play {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background: #2563eb;
  border: 2px solid #1d4ed8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 关键：不要设置overflow:hidden */
  overflow: visible;
}

.icon-wrapper {
  /* 子容器铺满按钮，确保图标居中 */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper i {
  font-size: 24px;
  color: #fff;
}

两种方案都能完美实现“按钮圆形+图标边角锐利”的效果，你可以根据自己的代码结构选择合适的一种~

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