Закругленные углы на DIVs с цветом фона

Question

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

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

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

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

Спасибо!

Answer 1

В вашей разметке вы должны задать радиус границы для #shell и #title, чтобы острые углы #title не перекрывали #shell.

Aживой пример, 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;
}

Answer 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/

Answer 3

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

Answer 4

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

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

Answer 5

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

<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.