圆角与背景颜色

的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

圆角与背景颜色

回答

相关问题