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

【问题讨论】:

  • 看起来边框半径在您发布的 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;”根据视频的风格。

      【讨论】:

        猜你喜欢
        • 2014-03-13
        • 2011-12-10
        • 2022-11-28
        • 1970-01-01
        • 1970-01-01
        • 2019-12-23
        • 2020-07-20
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多