Question

当我们设置div的border-radius，然后为div设置代码background: url(image.png)时，即使图像大于div，div也会得到一个弯角。这是因为图像设置为背景。

但是，当我想在div中包含.swf文件时，我现在面临一个问题。

这里是div的代码以及作为对象本身包含的.swf文件：

    <div id="video_container_1" style="height:300px; border: thick; -moz-border-radius: 5px; border-color:#000000">
              <object classid="vid:1" codebase="FlashVideos/bride.swf" width="250px" height="300px" style="-moz-border-radius: 5px; border-color:#000000">
          <param name="FlashVideos/bride.swf" />
          <param name="quality" value="high" />
          <embed src="FlashVideos/bride.swf" quality="high" 
          pluginspage="http://www.macromedia.com/go/getflashplayer" 
          type="application/x-shockwave-flash" width="250" height="300" wmode="transparent">
          </embed>
        </object>
   </div>

在这里，我已经将border-radius设置为5 px。我在Mozilla上测试它，这就是我使用-moz-border-radius的原因。但是div没有得到弯曲的角落。但是，如果我删除包含.swf文件编码的<object>标记下的整个代码，则div具有弯角。

也许有一件我没有得到的愚蠢的事情。如何获得弯角？

Answer 1

尝试删除height属性并添加填充，并查看给出的结果。

示例：

    <div id="video_container_1" style="padding: 3px; border: thick; -moz-border-radius: 5px; border-color:#000000">
              <object classid="vid:1" codebase="FlashVideos/bride.swf" width="250px" height="300px" style="-moz-border-radius: 5px; border-color:#000000">
          <param name="FlashVideos/bride.swf" />
          <param name="quality" value="high" />
          <embed src="FlashVideos/bride.swf" quality="high" 
          pluginspage="http://www.macromedia.com/go/getflashplayer" 
          type="application/x-shockwave-flash" width="250" height="300" wmode="transparent">
          </embed>
        </object>
   </div>

Answer 2

尝试将其添加/修改为容器div的样式属性：

overflow: hidden; height: 300px; width: 250px; border: 5px solid #000;

Answer 3

使用与padding对应的border-radius授予容器，如下所示：

<div id="video_container_1" style="-moz-border-radius: 5px; padding: 3px;">
    <!-- ... -->
</div>

Answer 4

只需将border-radius规范放在容器div上，根据需要调整高度和宽度，并指定overflow：hidden; 我不需要使用任何填充。

设置包含.swf文件的div的border-radius

4 个答案: