本文介绍如何通过现代 CSS 的 clip-path 属性实现视频上下区域的精准裁剪，使其在保持全宽布局的同时隐藏顶部和底部内容，解决传统 clip 和 overflow 方案失效的问题。

本文介绍如何通过现代 css 的 `clip-path` 属性实现视频上下区域的精准裁剪，使其在保持全宽布局的同时隐藏顶部和底部内容，解决传统 `clip` 和 `overflow` 方案失效的问题。

要裁剪视频的顶部和底部（即保留中间区域），关键在于放弃已废弃的 clip 属性（仅支持绝对定位且语法严格，rect() 在现代浏览器中已被 clip-path 取代），转而使用更灵活、标准化且广泛支持的 clip-path。

✅ 正确做法：使用 clip-path: polygon()

clip-path 允许你定义任意形状的裁剪区域。对于“上下裁剪”，最常用的是矩形裁剪——只需指定四个顶点坐标，围出中间可见区域：

.d1 video {
  width: 100%;
  height: auto;
  clip-path: polygon(0 33%, 100% 33%, 100% 67%, 0 67%);
  margin: -18.6% 0; /* 补偿因裁剪导致的视觉偏移，使内容居中 */
}

其中：

• 0 33% → 左上角（距顶部33%处）
• 100% 33% → 右上角（同高度）
• 100% 67% → 右下角（距顶部67%处）
• 0 67% → 左下角

这四点构成一个水平居中、高度约34%原始视频高度的矩形窗口，自然隐藏了顶部约33%和底部约33%的内容。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

? HTML 结构建议

务必用

包裹

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！