在DIVs的圆角落与背景颜色 [英] Rounded Corners on DIVs with Background Color

问题描述

我有一些代码看起来像这样：

I've got some code that looks like this:

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

shell div有一个灰色边框，我想要圆角。我遇到的问题是标题div有一个绿色的背景，它重叠的圆角的壳。

The shell div has a grey border that I want rounded corners on. The problem I'm running into is the title div has a green background and it's overlapping the rounded corners of the shell. It either overlaps or doesn't jut up against the edges to provide a fluid look.

我正在寻找一个与IE 7和8向后兼容的解决方案，但是，如果在HTML5中有一个解决方案很简单，我会愿意失去这些浏览器。

I'm looking for a solution that's backwards compatible with IE 7 and 8, but if there's a solution in HTML5 that's simple I would be willing to lose those browsers.

谢谢！

推荐答案

在你的标记中，你必须给 #shell 和 #title ，以便 #title 的尖角不会与 #shell 重叠。

In your markup, you have to give border-radius to both #shell and #title so that the #title's sharp corners don't overlap #shell's.

一个实例， 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) */
}

这篇关于在DIVs的圆角落与背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！