Округлые углы на DIV с цвет фона

У меня есть код, который выглядит так:

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

У раковины div есть серая рамка, на которой я хочу закругленные углы. Проблема, с которой я сталкиваюсь, - это заголовок div имеет зеленый фон и перекрывает закругленные углы оболочки. Он либо перекрывается, либо не выступает против краев, чтобы обеспечить внешний вид жидкости.

Я ищу решение, которое обратно совместимо с IE 7 и 8, но если есть решение в HTML5, то я бы хотел потерять эти браузеры.

Спасибо!

Ответы

Ответ 1

В вашей разметке вы должны указать радиус границы как на #shell, так и на #title, чтобы острые углы #title не перекрывались #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) */
}

Ответ 2

Другой способ добиться этого - установить внешний 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

Вы, вероятно, захотите объединить только два верхних угла заголовка 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, насколько я знаю, кроме использования изображений.

Ответ 4

Internet Explorer не поддерживал пограничный радиус до IE9, что сильно расстраивало разработчиков и дизайнеров. В IE9 важными шагами являются использование метки META METE и предоставление радиуса границы:

<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 может справиться с потерей. Microsoft должна активировать эту игру и поддерживать CSS3.

Ответ 5

Вы можете использовать PIE с IE7 и 8. Он позволяет использовать некоторые функции CSS3 в IE7 и IE8. И да, я знаю, это не браузер, это боль. Может быть, проклятие.

Вы можете проверить его здесь.