CSS overflow: clip 怎样在裁剪内容时不产生滚动条

如果一个卡片只需要把阴影、徽标或装饰图形裁在边界内，又不希望它意外变成滚动容器，可以优先考虑 overflow: clip。它会裁剪溢出内容，不显示滚动条，也不创建滚动容器；overflow: hidden 虽然同样看不到滚动条，但在确实发生溢出时仍保留滚动容器语义，内容还可能通过聚焦或脚本滚入可视区域。

本文只讨论 overflow: clip 与 overflow: hidden 在裁剪、滚动容器和键盘聚焦上的差别。官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow。

选择口诀是：只裁装饰、不需要找回内容时用 clip；内容里有按钮、链接或输入框，且需要键盘用户看到聚焦目标时，不要直接用 clip。

先明确组件真正要完成的任务

常见场景是固定尺寸卡片里有一层阴影、角标或放大的装饰图。设计要求是“超出卡片的部分不可见”，并不是“卡片内部存在一个隐藏的滚动区域”。如果使用 hidden，浏览器可能把这个卡片视为滚动容器；它没有滚动条，却仍然带有可滚动的内部语义。

clip 把裁剪和滚动分开：内容在裁剪边界外不可见，元素不是滚动容器，scrollTop、scrollLeft 或 scrollTo() 也不能把被裁掉的内容找回来。这正适合纯视觉装饰，但不适合承载需要操作的内容。

非交互装饰层可以直接使用 clip

先给卡片一个明确的尺寸，再让装饰层随卡片边界裁剪。下面的例子把放大的光晕和角标当成非交互内容，它们不需要被键盘聚焦，也没有“滚动进去继续看”的需求。

  新
  
组件标题
  
这里是卡片正文。

.feature-card {
  position: relative;
  overflow: clip; /* 只裁剪视觉溢出，不创建隐藏滚动容器。 */
  border: 1px solid #d7deea;
  border-radius: 16px;
  padding: 24px;
  background: #ffffff;
}

.glow {
  position: absolute;
  inset: -28px auto auto -20px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #b7d8ff;
  filter: blur(26px); /* 光晕故意超出卡片，交给 clip 裁掉。 */
  opacity: 0.65;
}

.badge {
  position: absolute;
  top: 12px;
  right: -8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #153b68;
  color: #ffffff;
}

这个选择的关键不是“看不到滚动条”，而是组件不应该拥有滚动区域。后续脚本也不应把卡片当作可滚动节点来设置 scrollTop；如果业务确实要让用户找回被裁掉的内容，就应重新评估容器属性。

需要留出视觉边缘时使用 overflow-clip-margin

clip 默认在元素的溢出裁剪边缘裁剪内容，overflow-clip-margin 可以把这条边缘向外推一个有限距离。它适合让一圈阴影或小徽标保留一点视觉呼吸空间，但它仍然不会把元素变成滚动容器。

.feature-card {
  overflow: clip;
  overflow-clip-margin: 10px; /* 只放宽裁剪边缘，不开启滚动。 */
}

.feature-card--tight {
  overflow-clip-margin: 0; /* 需要严格贴合边界时恢复默认裁剪范围。 */
}

这里的长度值只改变“裁剪到哪里”，不改变“能不能滚动”。如果装饰层需要完全收进卡片，就保留默认的 0；如果只希望阴影边缘不被切得太硬，再给一个很小的值，并把装饰范围控制在组件设计内。

按钮和输入框不要被 clip 裁掉

clip 对可访问性的影响容易被忽略。被裁掉的按钮、链接或输入框仍可能获得键盘焦点，但浏览器不会像 hidden 那样把焦点目标滚入可视区域。结果是焦点已经移动，键盘用户却看不到当前操作对象。

因此，交互区域应该放在裁剪容器的安全范围内；如果内容确实需要在有限空间中滚动，应选择能保留滚动语义的属性，并明确容器的键盘访问方式。

保存设置
  
    显示提示
    

.action-panel {
  max-block-size: 12rem;
  overflow: auto; /* 交互内容需要可被键盘和用户滚动找到。 */
  overscroll-behavior: contain; /* 防止内部滚动继续带动外层页面。 */
}

.action-panel:focus-visible {
  outline: 3px solid #2b74c8; /* 容器获得焦点时给出清楚的视觉提示。 */
  outline-offset: 3px;
}

tabindex="0" 不是给所有区域机械添加的装饰属性，而是在容器本身需要由键盘进入时使用。对一个纯装饰卡片，不要把它变成可聚焦对象；对一个确实承载多个操作项的有限区域，要同时考虑焦点可见性、滚动路径和屏幕阅读器能否理解它的用途。

用一张清单做最终选择

如果只是担心滚动条露出来，先问一句“这个节点是不是应该成为滚动容器”。答案为“不是”，并且被裁剪的内容完全是非交互装饰时，clip 通常更贴合语义；答案为“是”，或者裁剪区域中有必须可操作的内容时，就要保留可访问的滚动路径。

常见问题

overflow: clip 和 overflow: hidden 都没有滚动条，为什么不能互换？

因为滚动条只是可见表现。hidden 在发生溢出时仍是滚动容器，焦点或脚本可能让内容滚动到视口；clip 不创建滚动容器，也不支持程序化滚动。

使用 clip 后能不能用 scrollTo 找回内容？

不能把 clip 当成隐藏滚动区域。需要滚动找回内容时，应改用合适的滚动属性，并重新安排交互内容的可见范围。

overflow-clip-margin 会让元素变成滚动容器吗？

不会。它只调整溢出裁剪边缘的位置，让内容在边界外保留指定长度；滚动容器和程序化滚动语义仍然不会因此出现。

clip 适合放在包含按钮的卡片最外层吗？

只有在你能保证按钮、链接和输入框始终落在可见裁剪区域内，并且不会因布局变化被裁掉时才谨慎使用。更稳妥的做法是让装饰层单独承担 clip，把交互内容放在不裁剪或可滚动的内容层中。