CSS3：边界半径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的边框。 问题是两个上角都没有绘制边框。 它绘制在其他地方，包括底角。 我在Google上寻找了东西，但找不到任何东西...

任何想法 ？

Answer 1

其他标记和样式中的问题，因为您的CSS是正确的 ： 在dabblet上的测试用例

尝试添加一些边距： #page { margin: 15px; } #page { margin: 15px; }可能是边框是简单不可见的，也可能是#page 容器隐藏带有overflow: hidden; border overflow: hidden;

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

Answer 2

未定义页面高度。 这就是为什么它跨越整个窗口，而您看不到其他边框的原因。

也许这就是它不起作用的原因。

我刚刚做了一些更改。 见小提琴 。

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

我猜由于高度的问题，底部将被隐藏，您能在上面设置一些高度吗？