邊框半徑不影響內部元素

我有一個佈局，其中所有的頁面內容都在一個帶圓角的框中。這包括頁面的標題等。我有一個包含我的標題內容的div元素，包含頁面主要內容的div以及包含頁腳的div。我的問題是這樣的：由於我的「標題」div的邊框不是圓角，所以大的「容器」div似乎不是在頂部舍入。我已經調查過，並表明這只是「標題」div疊加在「容器」div上。我在這裏有一個例子：http://jsfiddle.net/V98h7/。邊框半徑不影響內部元素

我已經嘗試將「標題」div的邊界舍入到相同的程度，但是這會在邊界上創建一個小缺陷（它會獲得自己的邊框，「標題」div的背景色）。絕望之餘，我也嘗試將容器的z-index設置爲很大的數字。這沒有做任何事情。

我覺得應該有一個簡單的解決方案來解決這個問題。我不想要一個JavaScript修復。我更喜歡CSS，但是LESS也可以。

來源

2012-06-13 diracdeltafunk

請記住LESS只是CSS的預處理器。如果兩種語言完全同樣強大，爲什麼要提到LESS呢？ – Mitja

這裏是小提琴 - http://jsfiddle.net/ashwyn/V98h7/2/

添加 -

#outer { 
    overflow:hidden 
}

，它會工作。

來源

2012-06-13 05:25:38 Ashwin

這就是我正在尋找的東西。我會試試看！ – diracdeltafunk

其實最近我有這個問題。謝謝。 – Ashwin

嗯......這裏有點奇怪。我在頭部div和外部div的頂部之間留下了一堆空間。即半徑開始的區域 – diracdeltafunk

這裏的jsfiddle

http://jsfiddle.net/V98h7/1/

爲了圓剛邊框邊角border-radius可以採取4個值TOP-LEFT RADIUSTOP-RIGHT RADIUSBOTTOM-RIGHT RADIUSBOTTOM-LEFT-RADIUS

所以border-radius: 20px 20px 0 0;將圓你內心的div從頂部的更新。請記住使用與父div相同的半徑值，否則會看到一些額外的邊框。

來源

2012-06-13 05:24:55 Rishabh

正如我在我的文章中所說，這會導致一些瀏覽器中的毛刺。 – diracdeltafunk

你可以告訴哪些瀏覽器，也會幫助我測試。我在我的項目中使用了相同的代碼。 – Rishabh

在Chrome中，我看到了很多這個錯誤。這是非常輕微的，但現在。 – diracdeltafunk

-1

嘗試賦予容器div比標題div稍大的邊框半徑（在頂部兩個角）。

來源

2012-06-13 05:25:29

不錯的主意，我會檢查出來。 – diracdeltafunk

使用此：

#outer { overflow: hidden; }

或本：

#inner1 { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
}

或者你也許可以試試這個：

#outer div:first { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
}

（注：我沒有測試上面的最後一個選項）。

來源

2012-06-13 05:28:47

邊框半徑不影響內部元素

回答

相關問題