如何让CSS过渡效果严格限制在圆角边界内

通过为容器元素添加 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，是实现「圆角内平滑过渡」的标准实践。