Question

如何为视频元素添加边框半径。这是我的code.it在mozilla-firefox中工作正常，但在chrome.Isnt chrome中支持视频元素边框半径。

CSS 请#video {

-moz-border-radius:40px;
 webkit-border-radius:40px;
 border-radius:40px;

}

HTML：

<video id="video"  style="display:block;margin:0 auto;"></video>

提前感谢。

Answer 1

您错过了-中的-webkit-border-radius。

我发现这个css tricks blog对于查找跨浏览器样式非常有帮助。

Answer 2

创建父div并为其设置边框半径
将视频包含在父div中。

BTW：对于现代浏览器，您可以使用“border-radius”而不是“--moz-border-radius”和“-webkit-border-radius”。

示例：

<html>
<head>
<style type='text/css'>
.videobox {
    width: 700px;
    border: 5px solid #000;
    border-radius: 40px;
    }
    .video-stream {margin: 30px;}
</style>
</head>
<body>
    <div class="videobox">
        <video class="video-stream"  id=home_video class="video-js vjs-default-skin" controls preload=none width=640 height=264
            poster="http://video-js.zencoder.com/oceans-clip.jpg">
          <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
          <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/>
          <track kind=captions src="/video-js/captions.vtt" srclang=en label=English />
        </video>
    </div>
</body>
</html>

为网络摄像头视频元素添加边框半径

2 个答案: