Создать div с заголовком заголовка

Ответ 1

HTML:

<div class="box">
    <h2>Div Title</h2>
    <p>Div content.</p>
</div>

и CSS:

.box {border:2px solid #0094ff;}
.box h2 {background:#0094ff;color:white;padding:10px;}
.box p {color:#333;padding:10px;}

Использовать CSS3 для радиуса границы

.box {
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

Вышеприведенный код будет работать в firefox, safari, chrome, opera (10.5 +) и т.д.

Теперь с бонусом демо

Ответ 2

HTML:

<div class="myDiv">
  <h2>Div Title</h2>
  <p>Div content.</p>
</div>

CSS

.myDiv {
  border:2px solid #0094ff;
  -webkit-border-top-left-radius:6px;
  -webkit-border-top-right-radius:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  width:300px;
  font-size:12pt; /* or whatever */
}
.myDiv h2 {
  padding:4px;
  color:#fff;
  margin:0;
  background-color:#0094ff;
  font-size:12pt; /* or whatever */
}
.myDiv p {
  padding:4px; 
}

Демо.

Ответ 3

То, что вы хотите, невозможно, если вы действительно не заботитесь о поддержке в Internet Explorer.

http://www.the-art-of-web.com/css/border-radius/

Ответ 4

Как сказал Фабиан, вы не можете делать именно то, что хотите в Internet Explorer. Если вы все еще решите, что хотите создать это без каких-либо изображений /javascript, я настоятельно рекомендую вам использовать некоторые условные утверждения - удивительное количество людей по-прежнему использует Internet Explorer, и я немного обеспокоен тем, как это решение будет отображаться в IE

Желаем удачи - это был действительно большой вопрос!

Ответ 5

Используя демонстрацию wiifm JS Fiddle, я решил проблему при создании календаря и хотел сделать события в календаре более яркими и динамичными - я хотел иметь DIV в качестве содержащего элемента вместе с H2 на время событие и внутренний тег P, содержащий текст события - у меня был набор предварительно определенных цветов для пользователей, которые вы выбрали, и хотел, чтобы фон H2 имел тот же цвет, что и граница содержащего элемента, на основе на который второму классу был присвоен элемент. Как правило, вам нужно определить цвет фона для H2, но с помощью этого трюка он использует цвет фона содержащего элемента в качестве фона faux, поэтому он сохраняет необходимость создания класса только для этого и позволяет полученному коду быть намного чище. Здесь вилка JS Fiddle, связанная с тем, что я сделал. Он также работает в IE8!

http://jsfiddle.net/Hsm35/

Просто хотел поделиться, так как это помогло мне добраться до моего решения.