通过为容器添加 overflow: hidden 并确保其为块级或行内块元素，可强制伪元素过渡效果被裁剪在 border-radius 定义的圆角区域内，从而实现“从内部开始”的平滑过渡效果。
通过为容器添加 overflow: hidden 并确保其为块级或行内块元素，可强制伪元素过渡效果被裁剪在 border-radius 定义的圆角区域内，从而实现“从内部开始”的平滑过渡效果。
要解决伪元素（如 ::after）在过渡时“溢出圆角边界”的问题，核心在于理解浏览器渲染机制：border-radius 仅影响元素自身的背景与边框绘制区域，但不会自动裁剪子元素或伪元素的内容。即使你为 ::after 设置了相同的 border-radius，其宽高变化仍会突破父容器的视觉边界——除非显式启用裁剪。
✅ 正确做法是：在触发过渡的父容器（即 #login-now）上设置 overflow: hidden，并确保该容器具有明确的盒模型边界（推荐使用 display: inline-block 或 display: block）。这样，所有超出其 padding-box（含圆角）的内容都会被裁剪，伪元素的扩展动画自然被“关”在圆角之内。
以下是优化后的完整代码：
#login-now {
position: relative;
display: inline-block; /* 关键：使 overflow:hidden 生效 */
font-size: 18px;
color: white;
background-color: #00a295;
padding: 13px 94px;
border-radius: 10px;
line-height: 2.5;
overflow: hidden; /* ✅ 核心修复：裁剪溢出内容 */
text-decoration: none; /* 推荐：移除默认下划线 */
}
#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 */
/* 注意：此处无需设置 border-radius —— 裁剪由父容器完成 */
}
#login-now:hover::after {
width: 100%;
}
<a id="login-now" href="#"> <span id="login-now-text">Log in</span> </a>
? 关键注意事项：
- 默认是内联元素，overflow: hidden 对其无效，因此必须显式声明 display: inline-block（或 block）；
- 不必为 ::after 重复设置 border-radius，反而可能因渲染优先级导致边缘锯齿或兼容性问题；
- 推荐将 transition 属性精简为 width 0.35s ease-in-out，避免 all 过渡引发不必要的重绘；
- 若需支持旧版 Safari，可添加 -webkit-mask 或 clip-path: inset(0) 作为增强方案，但 overflow: hidden + border-radius 在现代浏览器中已具备良好兼容性。
这一方案简洁、高效且语义清晰，是处理“圆角内过渡”类需求的标准实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
