CSS - overflow-clip-margin 属性

CSS overflow-clip-margin 属性指定内容在被裁剪之前可以超出元素边框的距离。此距离称为溢出剪裁边距。

可能的值

<length> − 像素或 em（相对于元素的字体大小）长度。偏移量指定溢出剪裁边缘从所选边框边缘扩展的距离。默认值为零。负值无效。
<visual-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>Tutorialspoint CSS Overflow-clip-margin</h4>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
         standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
         make a type specimen book.</p>
      </div>
      <div class="overflow-em">
         <h4>Tutorialspoint CSS Overflow-clip-margin</h4>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
         make a type specimen book.</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>Tutorialspoint CSS Overflow-clip-margin</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.</p>
   </div>
</body>
</html>

打印页面