通过为容器元素添加 overflow: hidden 并确保其为块级或行内块级元素，可强制伪元素的过渡动画完全受限于 border-radius 定义的可视区域，避免溢出到圆角外部。
通过为容器元素添加 `overflow: hidden` 并确保其为块级或行内块级元素，可强制伪元素的过渡动画完全受限于 `border-radius` 定义的可视区域，避免溢出到圆角外部。
在使用 ::after 伪元素实现背景滑入过渡效果时，一个常见问题是：即使父元素设置了 border-radius，伪元素的动画仍会从直角矩形区域开始扩展，导致视觉上“突破”圆角边界（如图所示）。根本原因在于 border-radius 不会自动裁剪子元素或伪元素的内容——它仅作用于自身盒模型的边框渲染，而内部内容（包括绝对定位的 ::after）默认仍按原始矩形区域绘制。
解决方案的关键在于 显式启用裁剪：为触发过渡的容器（即 #login-now）添加 overflow: hidden。但需注意：overflow 属性对 display: inline 元素无效（而 <a> 默认为 inline），因此必须先将其设为 inline-block 或 block。
✅ 正确写法如下：
#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，是实现「圆角内平滑过渡」的标准实践。
