当为按钮添加绝对定位的 `::before` 伪元素并设置 `top/right/bottom/left` 时，伪元素会溢出父容器的 `border-radius`，导致视觉上按钮“变方”；只需在按钮上添加 `overflow: hidden` 即可强制裁剪超出圆角区域的内容。

在 CSS 中，border-radius 仅影响元素自身内容的绘制边界，但不会自动裁剪子元素或伪元素——即使伪元素使用 position: absolute 并位于父元素内部，只要其渲染区域超出父元素的圆角轮廓，就会“撑开”视觉形状，使原本圆润的按钮边缘看起来像矩形。

✅ 正确解决方案：
为按钮添加 overflow: hidden，即可启用裁剪上下文（clipping context），确保 ::before 伪元素严格受限于按钮的圆角边界：

button {
  height: 60px;
  position: relative;
  width: 200px;
  margin: 0 35px;
  border-radius: 50px; /* 圆角关键 */
  overflow: hidden;    /* ✅ 关键修复：启用裁剪 */
  outline: none;
  border: none;
  background: #111;
  color: #fff;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

button:last-child::before {
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}

⚠️ 注意事项：

• overflow: hidden 是最直接、语义清晰的修复方式，兼容所有现代浏览器（包括 Safari、Chrome、Firefox 和 Edge）。
• 避免依赖 top/right/bottom/left 控制伪元素尺寸（如本例中用四边偏移模拟“放大”效果）；更推荐显式设置 width/height + transform: scale() 或 inset（CSS Logical Properties），提升可维护性与可预测性。例如：

/* 更推荐的写法（语义明确、易调试） */
button:last-child::before {
  content: '';
  position: absolute;
  background: inherit;
  inset: -5px; /* 等价于 top/right/bottom/left: -5px，但更简洁 */
  border-radius: 50%; /* 若需保持圆形，别忘同步设置 */
}

? 总结：border-radius 不等于 overflow: hidden —— 前者定义外观曲率，后者才真正控制渲染裁剪。二者配合使用，是实现高质量圆角组件（如悬浮光晕、点击涟漪、描边动画等）的基础保障。