如何让CSS过渡效果严格限制在圆角边界内-html教程-PHP中文网

通过为容器元素添加 overflow: hidden 并确保其为块级或行内块级元素，可强制伪元素的过渡动画完全受限于 border-radius 定义的可视区域，避免溢出到圆角外部。

通过为容器元素添加 `overflow: hidden` 并确保其为块级或行内块级元素，可强制伪元素的过渡动画完全受限于 `border-radius` 定义的可视区域，避免溢出到圆角外部。

在使用 ::after 伪元素实现背景滑入过渡效果时，一个常见问题是：即使父元素设置了 border-radius，伪元素的动画仍会从直角矩形区域开始扩展，导致视觉上“突破”圆角边界（如图所示）。根本原因在于 border-radius 不会自动裁剪子元素或伪元素的内容——它仅作用于自身盒模型的边框渲染，而内部内容（包括绝对定位的 ::after）默认仍按原始矩形区域绘制。

解决方案的关键在于 显式启用裁剪：为触发过渡的容器（即 #login-now）添加 overflow: hidden。但需注意：overflow 属性对 display: inline 元素无效（而默认为 inline），因此必须先将其设为 inline-block 或 block。

✅ 正确写法如下：

CSS婚礼策划服务机构宣传网站模板

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，是实现「圆角内平滑过渡」的标准实践。