Создание заголовка div, который будет точно зафиксирован в родительском div округленного угла - PullRequest
Новая
       45

Создание заголовка div, который будет точно зафиксирован в родительском div округленного угла

0 голосов
/ 20 февраля 2012

Я создал div с круглым углом, который содержит div заголовка и содержимого. Код выглядит следующим образом: 

<div class="borderRadius">
      <div class="header">Header</div>
      <div class="content">content goes here</div>
</div>

Классы идут следующим образом в разделе head 

.borderRadius {border:1px solid #dadada; border-radius:15px;-moz-border-radius:15px; -webkit-border-radius:15px; }
.header { background: none repeat scroll 0 0 #F5F7F6;height: 25px;padding: 4px 10px 0;text-align: left; }
.content{ width:auto; }

ТеперьЯ хочу, чтобы div заголовка точно вписывался в родительский div округленного угла, так чтобы углы div заголовка не покрывали закругленные углы.

1 Ответ

0 голосов
/ 20 февраля 2012

Ну, решение действительно простое, я уверен, что вы просто пропустили его: вы должны также указать угловой радиус для класса .header ;-) Вот так: 

.borderRadius {border:1px solid #dadada; border-radius:15px;-moz-border-radius:15px; -webkit-border-radius:15px; }
.header { background: none repeat scroll 0 0 #F5F7F6;height: 25px;padding: 4px 10px 0;text-align: left; border-radius:15px;-moz-border-radius:15px; -webkit-border-radius:15px;}
.content{ width:auto; }

Я протестировал его на Opera, FF, Chrome и IE9 (IE9 + поддерживает только CSS3 с радиусом границы), надеюсь, это поможет.

...