当为按钮添加绝对定位的 `::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 —— 前者定义外观曲率，后者才真正控制渲染裁剪。二者配合使用，是实现高质量圆角组件（如悬浮光晕、点击涟漪、描边动画等）的基础保障。
