剪辑设置 - CSS

简介

剪辑设置是指在处理盒状元素的尺寸大小和位置时，将元素的尺寸和位置限制在包含它们的容器内。在 CSS 中，使用 overflow: hidden、overflow: scroll、overflow: auto 等属性来设置剪辑。剪辑设置对于图片、视频等具有宽高比的元素尤其重要，因为这些元素的大小和位置不当会导致视觉上的不协调。

属性

overflow

overflow 属性指定了容器中内容溢出时的处理方式：

• visible：默认值，内容溢出时不进行剪裁，会超出容器
• hidden：内容溢出时被剪裁，不会超出容器
• scroll：内容溢出时在容器中显示滚动条，可以通过滚动条查看超出部分
• auto：根据需要显示滚动条，如果内容没有溢出则不显示

clip

clip 属性可以剪裁元素的显示区域，只有在元素的 position 属性设置为 absolute 或 fixed 时才有效。clip 属性由四个值组成，分别表示剪切区域的四个边缘，即左边缘、上边缘、右边缘和下边缘，可以使用的值有 auto、0、50%、100% 等。

clip-path

clip-path 属性可以通过使用 SVG 路径来剪裁元素。可以使用 url() 函数指定已经定义的 SVG 路径，也可以使用 path() 函数在属性的值中定义路径。

示例

overflow

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

img {
  width: 300px;
  height: 200px;
}

.container {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

img {
  width: 300px;
  height: 200px;
}

clip

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

img {
  width: 300px;
  height: 200px;
  position: absolute;
  top: -50px;
  left: -100px;
  clip: rect(50px 250px 150px 100px);
}

clip-path

.container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

img {
  width: 300px;
  height: 200px;
  clip-path: url(#myClipPath);
}