CSS圆角边界内实现严格过渡效果的技巧

正确的代码实现如下：

#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。可以说是实现圆角内平滑过渡效果的标准做法。