我有一些看起来像这样的代码:
<div id="shell">
<div id="title">TITLE HERE</div>
<div id="content">Article Content Goes Here</div>
</div>
shell div有一个灰色边框,我想要圆角。我遇到的问题是标题div有一个绿色背景,它重叠了shell的圆角。它要么重叠,要么不突出于边缘以提供流畅的外观。
我正在寻找一种向后兼容IE 7和8的解决方案,但如果HTML5中的解决方案很简单,我愿意丢失这些浏览器。
谢谢!
在你的标记中,你必须为#shell
和#title
提供border-radius,这样#title
的尖角不会与#shell
重叠。
一个现实的例子,http://jsfiddle.net/BXSJe/4/
#shell {
width: 500px;
height: 300px;
background: lightGrey;
border-radius: 6px;
}
#title {
background: green;
padding: 5px;
border-radius: 6px 6px 0 0;
}
另一种方法是将外部div设置为隐藏溢出
#shell {
width:500px;
height:300px;
background:lightGrey;
border-radius: 10px 10px 10px 10px;
overflow:hidden;
}
#title {
background:green;
padding:5px;
}
您可能希望仅使用与shell 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进行任何操作。
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。