0

如何为视频元素添加边框半径。这是我的代码。它在 mozilla-firefox 中运行良好，但在 chrome 中失败。视频元素边框半径不支持 chrome。

CSS #视频{

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

}

HTML：

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

提前致谢。

4

2 回答 2

0

你错过了-in -webkit-border-radius。

我发现这个css 技巧博客对于查找跨浏览器样式非常有帮助。

于 2013-03-09T11:35:24.683 回答
0
  1. 创建父 div 并为其设置边框半径
  2. 将视频包含到父 div 中。

顺便说一句：对于现代浏览器，您可以使用“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>
于 2013-03-09T11:35:49.980 回答