CSS 视频圆角

在本文中，我们将介绍如何在 HTML5 视频上使用 CSS 实现圆角效果。

阅读更多：CSS 教程

前言

HTML5 提供了 <video> 元素用于嵌入和播放视频。通过 CSS 的 border-radius 属性可以轻松地为元素添加圆角效果。然而，直接将圆角应用于 <video> 元素时，只有视频区域会出现圆角，而控制条却不受影响。为了让整个视频区域都具有圆角效果，我们可以使用一些特殊技巧。

方法一：使用覆盖

第一种方法是在视频上覆盖一个具有圆角的 <div> 容器。我们可以将 <video> 元素和 <div> 容器放在同一个父元素中，并使用绝对定位来覆盖视频。然后，将 <div> 容器设置为与视频相同的尺寸和位置，并为其添加圆角属性。

<div class="video-container">
  <video src="video.mp4" controls></video>
  <div class="rounded"></div>
</div>

.video-container {
  position: relative;
  width: 600px;
  height: 400px;
}

.rounded {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: black;
  opacity: 0.5;
}

使用这种方法，我们可以将圆角效果应用于整个视频区域，包括控制条。同时，通过调整 <div> 容器的透明度，可以将视频内容与背景融合得更好。

方法二：使用嵌套

第二种方法是嵌套 <video> 元素和其父元素，并为父元素添加圆角属性。这种方法比较简单直接，不需要使用绝对定位来覆盖视频。

<div class="rounded-container">
  <video src="video.mp4" controls></video>
</div>

.rounded-container {
  width: 600px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
}

通过为父元素添加圆角属性，并设置其 overflow 属性为 hidden，可以实现将圆角效果应用于整个视频区域。

方法三：使用伪元素

第三种方法是使用 CSS 伪元素 ::before 或 ::after。我们可以通过在 <video> 元素前后插入一个伪元素，并为其添加圆角属性来实现效果。

<video src="video.mp4" controls></video>

video::before,
video::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: black;
  opacity: 0.5;
}

video::before {
  z-index: -1;
}

使用这种方法，我们可以直接为 <video> 元素添加圆角效果，而不需要额外的容器元素。

方法四：使用 CSS 遮罩

最后一种方法是使用 CSS 遮罩。CSS 遮罩可以在元素上创建一个可见或透明的图层，从而修改其外观。我们可以使用遮罩来实现圆角效果。

<video src="video.mp4" controls></video>

video {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

通过使用线性渐变遮罩图像，我们可以将 <video> 元素的底部部分渐变为透明，从而实现圆角效果。