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

我猜由於高度的問題，底部將被隱藏，您能在上面設置一些高度嗎？