CSS3：border-radius div上的边框

Question

我正在尝试在使用border-radius属性的div上使用border属性。

这是我的CSS：

#page {
    border: 1px solid #beb2b2;
    width: 732px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

因此，您可以看到我只是设置了边框半径（每个浏览器具有所有不同的属性）以及1px的边框。问题是两个顶角都没有绘制边框。它被绘制在其他地方，包括底角。我在谷歌上找了些东西但找不到任何东西......

有什么想法吗？

Answer 1

其他标记和样式中的问题，因为您的css是正确的：testcase on dabblet

尝试添加一些保证金：#page { margin: 15px; }可能是#page隐藏border的边界很简单隐藏或容器 <强> overflow: hidden;

更新：内部image中可能存在可能覆盖或忽略某些父属性的问题（例如border-radius）。

Answer 2

未定义页面高度。这就是它跨越整个窗口而你无法看到其他边界的原因。

也许这就是它无法正常工作的原因。

我刚做了一些改变。请参阅fiddle。

HTML

<div id=page></div>​

CSS

#page {
    border: 1px solid #beb2b2;
    width: 732px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    margin: 10px auto; /* the extra line */
    height: 200px; /* the extra line */
}​

Answer 3

我想由于高度有问题，底部会隐藏，你可以在上面设置一些高度。