DIV上的圆角与背景颜色

问题描述 投票:19回答:5

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

<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中的解决方案很简单,我愿意丢失这些浏览器。

谢谢!

css html5 rounded-corners
5个回答
33
投票

在你的标记中,你必须为#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;
}

23
投票

另一种方法是将外部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/


3
投票

您可能希望仅使用与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进行任何操作。


0
投票

你可以在IE7和8中使用PIE。它在IE7和IE8中启用了一些CSS3功能。是的,我知道,它不是一个浏览器,这是一个痛苦。也许是一个诅咒。

你可以检查一下here


0
投票

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。

© www.soinside.com 2019 - 2024. All rights reserved.