你是否遇到过这样的困扰？明明为按钮元素设置了圆角样式（border-radius），但当使用 ::after 伪元素实现背景滑入效果时，动画却像失控一般从直角边缘冲出，完全不顾父容器的圆角边界。这个 CSS 圆角溢出问题在前端开发中并不少见，而解决方式其实极其简单——只需为父容器添加 overflow: hidden 即可完美修复。
问题产生的根本原因在于：border-radius 仅作用于父容器自身的边框渲染，并不会自动裁剪其内部的子元素或伪元素内容。通俗地说，即使父元素拥有圆润的圆角，绝对定位的 ::after 伪元素依旧按照原始的矩形区域进行绘制和扩展，因而天然突破了圆角边界（如上图所示）。
解决方案的核心在于主动启用裁剪机制：为触发过渡的容器（即 #login-now）添加 overflow: hidden 属性。需要特别留意的是——overflow 对 display: inline 元素完全无效，而 标签默认就是行内元素。因此必须先将其 display 属性改为 inline-block 或 block，这样 overflow 才能正常起作用。
正确的代码实现如下：
#login-now {
position: relative;
display: inline-block; /* 必须设置，使 overflow 生效 */
overflow: hidden; /* 核心：裁剪超出 border-radius 的部分 */
font-size: 18px;
color: white;
background-color: #00a295;
padding: 13px 94px;
border-radius: 10px;
line-height: 2.5;
}
#login-now-text {
position: relative;
z-index: 2;
}
#login-now::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #007d73;
transition: width 0.35s ease-in-out; /* 推荐单独过渡 width，更精准 */
}
#login-now:hover::after {
width: 100%;
}
这里有几点需要特别关注：
- 删掉
#login-now::after上多余的border-radius: 10px——因为overflow: hidden已经让父容器的圆角代为裁剪，再额外设置反而可能在某些浏览器中引发渲染异常； - 用
transition: width 0.35s替代all，既能提升性能，又能避免意外触发其他属性的过渡效果； - 如果后续需要兼容 Flex 或 Grid 布局，也可以将
display: inline-block换为display: block或display: flex，只要确保overflow: hidden仍然生效即可。
这套方案简洁高效、兼容性极佳（覆盖所有现代浏览器及 IE11+），并且完全不需要 JavaScript。可以说是实现圆角内平滑过渡效果的标准做法。
