Question

我在带有圆角的div元素内播放Flash电影。问题是Flash影片切入其父级的角落。我可以通过添加边距来解决这个问题，但我并不是真的想这样做因为如果border-radius要改变，那么边际也需要改变。我强烈希望不具备这种依赖性，而宁愿能够剪掉多余的内容（即隐藏溢出，但overflow: hidden;不起作用）。

这是我用来说明问题的小提琴 - http://jsfiddle.net/donnapep/CWepw/1/

THX。

更新：道歉。即使将wmode参数设置为transparent，我也应该使用不起作用的Vimeo播放器。这是新的小提琴 - http://jsfiddle.net/donnapep/5ZRKP/7/

Answer 1

所以看起来HTML5视频和Flash视频中的圆角都可以在Firefox中使用，但在Chrome中无法使用。所以，我现在才开始使用它，直到Chrome为这些元素添加对border-radius的支持。

Answer 2

不是最优雅的方式，但似乎有效。我只是将边框分层在顶部并填充父母，以便边框切断下面闪光灯的角落。在Chrome，Safari和Firefox（所有Mac）中测试过。

示例：http://jsfiddle.net/BWcQ6/3/

HTML：

<div id="placeholder">
   <div id="rounded"></div>
   <object data="http://commondatastorage.googleapis.com/risemedialibrary-0afb2e81-b4a6-41f6-8f26-4eab430ddb3f/Car-speakers-590x90.swf" height="100%" width="100%"></object>
</div>

CSS：

#placeholder 
{
    width: 400px;
    height: 60px;
    border-radius: 15px;
    border: 10px solid #fff;
    position:relative;
    padding:5px;
}

#rounded
{
    width: 400px;
    height: 60px;
    border: 5px solid #000;
    border-radius: 15px;
    position:absolute;
    z-index:2;
    margin:-5px;
}

Vimeo削减了父母的圆角

2 个答案: