Вопросы Теги

Создайте отделение с [закрытым] заголовком заголовка

11
задан n002213f 31 March 2010 в 10:06
поделиться

4 ответа

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 +) и т. д.

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

37
ответ дан 3 December 2019 в 01:20
поделиться

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
ответ дан 3 December 2019 в 01:20
поделиться

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

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

2
ответ дан 3 December 2019 в 01:20
поделиться

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

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

0
ответ дан 3 December 2019 в 01:20
поделиться