如何在 HTML/CSS 中为视频添加边框半径答案

【问题标题】：How can I add border-radius to a video in HTML/CSS如何在 HTML/CSS 中为视频添加边框半径
【发布时间】：2020-10-13 18:49:10
【问题描述】：

如何将border-radius 添加到<video> 标记中。
这就是我的视频现在的样子：

（图片在这里：

我已经尝试过用 css 做视频标签，但它没有改变。

代码如下：

/*CSS*/

video {
border-radius: 10px;
}

<!HTML!>

<div class="fp-player">
<center>
<div id="instructions">
  <video id="my_video_1" class="video-js vjs-default-skin" width="320" height="240"
      controls preload="none" data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }' poster="https://example.org/image.png">
    <source src="https://example.org/video.mp4" type='video/mp4' />
  </video>
  </center>
    </div>

【问题讨论】：

看起来边框半径在您发布的 sn-p 中应用得很好
@irowe 也许只是我的浏览器。
因为我用的是safari，还没有更新到最新版本。
你在用什么？我在 MacOS 上安装了 Chrome 83，我可以在 sn-p 预览中看到圆角。如果我将边框半径提高到 100 像素，它会变得更加明显
我在 MacOS Catalina 上使用 Safari

标签： html css video styling border-radius

【解决方案1】：

将视频包装在一个 div 中并赋予它这种样式，

div {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 320px;
  width: 480px;
}

我在Adding border-radius for embedded YouTube video找到了这个答案

【讨论】：

【解决方案2】：

尝试清除您的浏览历史记录。

【讨论】：

【解决方案3】：

这是一个可能有帮助的例子

HTML

<!DOCTYPE HTML>
<html>
<head>

<style>

#video1 {
border-radius:10px;
}

</style>

</head>
<body>

<video id="video1" class="video-js vjs-default-skin" width="320" height="240" controls preload="none">
    <source src="https://example.org/video.mp4" type='video/mp4' />
  </video>

</body>
</html>

添加“边框半径：10px;”根据视频的风格。

【讨论】：