我有一些代码看起来像这样:
<div id="shell"> <div id="title">TITLE HERE</div> <div id="content">Article Content Goes Here</div> </div>
shell div有一个灰色边框,我想要圆角。我遇到的问题是标题div有一个绿色的背景,它与外壳的圆角重叠。它或者重叠或不突出在边缘以提供流畅的外观。
我正在寻找与IE 7和8向后兼容的解决方案,但如果HTML5中有一个解决方案很简单,我会愿意失去这些浏览器。
谢谢!
解决方法
在你的标记中,你必须给#shell和#title赋予border-radius,所以#标题的尖角不与#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) */ }