CSS3：边框半径 div 上的边框答案

【问题标题】：CSS3: border on a border-radius divCSS3：边框半径 div 上的边框
【发布时间】：2012-06-17 16:21:13
【问题描述】：

我正在尝试在使用边框半径属性的 div 上使用边框属性。

这是我的 CSS：

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

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

有什么想法吗？

【问题讨论】：

如果你做到了border: 3px，它会显示什么吗？我觉得这是一个渲染问题，导致边框无法正确对齐。
刚刚测试过here，似乎在 FF 和 Chrome 中运行良好。
我想我理解了我的错误，并试图解决这个问题，我将发布有关此的更多信息。顺便说一句，添加高度不会改变任何东西，这可能是因为我使用图像作为我的 div 诽谤“页面”的背景并且它覆盖了边框。
@Zuul NOT 查看演示 dabblet.com/gist/2931000
@MichaelDeKeyser demo 与 background-image 正在与 border-radius 合作

标签： html css

【解决方案1】：

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

尝试添加一些边距：#page { margin: 15px; } 可能是简单的边框 invisible 或 #page 的容器隐藏 border 和 overflow: hidden;

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

我刚刚做了一些更改。请参阅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 */
}

【讨论】：