2013-03-09 23 views
0

如何將邊框半徑添加到視頻元素。 這是我的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> 

在此先感謝。

回答

0

您在-webkit-border-radius中缺少-

我發現這個css tricks blog對於查找跨瀏覽器樣式非常有幫助。

0
  1. 創建父DIV並設置邊框半徑爲它
  2. 包括視頻爲母公司股利。

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> 
+0

感謝瓦列裏爲reply.But這不是鉻工作。我正在爲攝像頭工作作爲視頻。 – viru48 2013-03-09 11:50:32

+0

http://jsfiddle.net/biog/57Gmg/ – 2013-03-09 12:05:00

相關問題