css – 具有背景颜色的DIV上的圆角

我有一些代码看起来像这样:
<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) */
}

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...