CSS 属性

CSS Overflow-clip-margin 属性指定内容在被剪切之前可以溢出元素框的距离。这个距离称为溢出剪辑边距。

属性值

  • <length>: 以像素或em为单位的长度（相对于字体大小）元素。偏移量指定溢出剪辑边缘从所选框边缘延伸的距离。默认 e 值设置为零。负值无效。

  • <visual-box>: 当指定的偏移量为零时，视觉框指定要用作溢出剪辑边缘原点的框边缘。如果省略，则默认使用元素的 padding-box。 （值可以是: content-box | padding-box | border-box ）

适用范围

所有 HTML 元素。

语法

overflow-clip-margin: length in px | length in em | content-box | padding-box | border-box;

CSS Overflow-clip-margin: <length> 

我们可以将overflow-clip-margin属性设置为长度值，例如px或em。此长度值指定在剪切之前内容可以在元素框外绘制多远。

<html>
<head>
<style>
   .container {
      display: flex;
   }
   .overflow-px {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 250px;
      height: 150px;
      overflow: clip;
      overflow-clip-margin: 30px;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   .overflow-em {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 250px;
      height: 150px;
      overflow: clip;
      overflow-clip-margin: 2em;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-px">
         <h4>yxjc123.com CSS Overflow-clip-margin</h4>
         <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
      </div>
      <div class="overflow-em">
         <h4>yxjc123.com CSS Overflow-clip-margin</h4>
         <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
      </div>
   </div>
</body>
</html>

CSS Overflow-clip-margin: <visual-box> 

以下示例设置元素的 Overflow-clip-margin 属性距内容框 30 像素。内容框是元素内容内的区域，不包括任何填充或边框 -

<html>
<head>
<style>
   .overflow {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 250px;
      height: 150px;
      overflow: clip;
      overflow-clip-margin: content-box 30px;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="overflow">
      <h4>yxjc123.com CSS Overflow-clip-margin</h4>
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
   </div>
</body>
</html>