DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分！
CSS overflow-clip-margin 属性决定元素的溢出内容在被裁剪之前可以超出元素框多远。 此区域称为**溢出裁剪边缘**。
.element {
height: 100px;
overflow: clip; /* required */
overflow-clip-margin: 20px;
}
overflow: clip; 裁剪元素的内容，而 overflow-clip-margin 设置允许内容超出裁剪显示多远。语法
overflow-clip-margin: <visual-box> || <length [0,∞]><visual-box>: 当指定偏移量为零时，可视框指定用作溢出裁剪边缘原点的框边。 如果省略，则元素的填充框用作默认值。<length [0,∞]>: 偏移量指定溢出裁剪边缘从所选框边扩展多远。 如果省略，则该值设置为零。 负值无效。
- 初始值:
0px - 应用于: 所有元素
- 继承: 否
- 计算值: 计算的
- 动画类型: 离散
值
/* <length> values */
overflow-clip-margin: 20px;
overflow-clip-margin: 1rem;
overflow-clip-margin: 2.4em;
overflow-clip-margin: 3ch;
/* <visual-box> value */
overflow-clip-margin: content-box;
overflow-clip-margin: padding-box;
overflow-clip-margin: border-box;
/* Global values */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: unset;overflow: clip 是必需的
我们必须谈谈 overflow: clip 属性，因为它对于 overflow-clip-margin 的执行是必需的。 简而言之，overflow-clip 告诉浏览器超出元素边界的內容应该隐藏——就像声明
一样。 clip 关键字的不同之处在于它禁止所有滚动，无论是用户滚动还是程序化滚动。 还需要注意的是，框本身不会成为滚动容器，也不会启动新的格式化上下文。 换句话说，当溢出被裁剪时，不会出现自动滚动条或任何东西。
我们可以裁剪单个轴
overflow: clip 在 x 轴（左右方向）和 y 轴（上下方向）上设置裁剪。 但如果需要，我们可以隔离它们并在单个方向上进行裁剪，使用 overflow-x: clip 和 overflow-y: clip。
.element {
overflow-x: clip; /* clip along the x-axis only */
overflow-clip-margin: 20px;
}演示
这适用于所有形式的內容，包括图像。
浏览器支持
在撰写本文时，只有 Chrome 支持。
