如何在CSS3圓形邊框處裁剪內部HTML元素？

我在另一個div裏面有一個div。外部div有使用CSS3的圓角邊框。問題是，如果我在內部div上設置背景顏色，它會滲入角落。這是一個測試頁面，說明我的意思：http://www.webdevout.net/test?0O 如何在CSS3圓形邊框處裁剪內部HTML元素？

我懷疑這是不是一個渲染問題，因爲同樣的事情發生在Chrome，FF和Opera。我如何讓內部div在圓形邊框處裁剪？將Inner div上的border-radius設置爲繼承不會削減邊框，邊框不匹配。

編輯：內部div實際上是外部div內更多內容的標題，因此將內部div應用於圓形邊框將無法使用。

2011-01-21 BitLooter

我不知道如果這是你要尋找的答案，但嘗試添加填充到外部div。這可能有幫助。 – Xavi 2011-01-21 23:02:04

你可以在你的內部div上設置圓角，並使用你的外部div作爲容器（除非它不再需要，那麼只是擺脫它，以消除不必要的嵌套）。

我添加填充到你內心的div和應用了所有的CSS類與內部DIV。

2011-01-21 21:15:42 nybbler

溢出：隱藏應該這樣做......或者實際上，它不會......給內部容器另外設置一組圓角。

2011-01-21 21:07:28 Hoatzin

正如你所說，溢出：隱藏不起作用，並且舍入內部容器不夠好，因爲角落不完美。 – BitLooter 2011-01-21 21:53:36

@BitLooter - 邊框半徑的小提琴，你可以得到內角正確排列 – Endophage 2011-01-21 23:13:35

你不能。這些區域被元素的邊界佔據，並且不能改變。這並不是說沒有額外的標記和CSS就不能實現，但通常不會。

2011-01-21 23:08:54 Rob

圓你在內的div頂部邊角，但不圓的底角，就像這樣：

2011-01-21 23:25:31 jeffszusz

回答