圓角與背景顏色

的DIV我有一些代碼，看起來像這樣：圓角與背景顏色

<div id="shell"> 
    <div id="title">TITLE HERE</div> 
    <div id="content">Article Content Goes Here</div> 
</div>

外殼div有，我想在圓角的灰色邊框。我遇到的問題是標題div具有綠色背景，它與殼體的圓角重疊。它或者重疊或者不突出到邊緣以提供流暢的外觀。

我正在尋找一種向後兼容IE 7和8的解決方案，但如果HTML5中有一個簡單的解決方案，我願意失去這些瀏覽器。

謝謝！

來源

2011-06-26 Dexter

在您的標記，你必須給邊界半徑既#shell和#title使得#title的尖角不重疊#shell的。

一個活生生的例子，http://jsfiddle.net/BXSJe/4/

#shell { 
width: 500px; 
height: 300px; 
background: lightGrey; 
-moz-border-radius: 6px; 
border-radius: 6px; /* standards-compliant: (IE) */ 
} 

#title { 
background: green; 
padding: 5px; 
-moz-border-radius: 6px 6px 0 0; 
border-radius: 6px 6px 0 0; /* standards-compliant: (IE) */ 
}

來源

2011-06-26 15:33:46

這個例子是破碎。示例中的圓角在jsfiddle中不起作用。 – ifconfig

Internet Explorer在IE9之前不支持border-radius，這對開發人員和設計人員來說非常困難。隨着IE9的重要步驟，使用邊緣META標籤，並提供圓角半徑：

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<style> 
border-top-right-radius: 7px; 
border-top-left-radius: 7px; 
border-bottom-right-radius: 2px; 
border-bottom-left-radius: 2px; 
</style>

來源 - http://davidwalsh.name/css-rounded-corners

我寧願使用圖片，但IE瀏覽器可以做血本無歸。微軟應該加強它的遊戲，並支持CSS3。

來源

2011-06-26 15:28:59

您可以在IE7和IE8中使用PIE。它支持IE7和IE8中的一些CSS3功能。是的，我知道，這不是一個瀏覽器，這是一個痛苦。也許是一個詛咒。

您可以檢查它here。

來源

2011-06-26 15:30:09 leon

你可能想圓剛標題div的頂部兩個角半徑相同的外殼DIV，使他們不重疊。你可以使用CSS3是：

border-top-left-radius: XXpx 
border-top-right-radius: XXpx

對於舊的Mozilla瀏覽器的向後兼容，你也應該使用：

-moz-border-radius-topleft: XXpx 
-moz-border-radius-topright: XXpx

而對於舊版本的WebKit瀏覽器（Safari瀏覽器，主要是），你可以使用：

-webkit-border-top-left-radius: XXpx 
-webkit-border-top-right-radius: XXpx

但是，就我所知，除了使用圖像之外，對於舊的Internet Explorer瀏覽器沒有任何辦法。

來源

2011-06-26 15:33:51 EdoDodo

另一種方式來完成，這是設置外層div有溢出隱藏

#shell { 
width:500px; 
height:300px; 
background:lightGrey; 
border-radius: 10px 10px 10px 10px; 
overflow:hidden; 
} 
#title { 
background:green; 
padding:5px; 
}

http://jsfiddle.net/jdaines/NaxuK/

來源

2012-11-30 17:13:53 obiyoda

圓角與背景顏色

回答

相關問題