Ищу лучшую технику полукруглых углов на CSS

[toxass]

Сабж. Достали уже они

Просмотрел очень много техник, однако почти в каждой есть такие проблемы:

1. Необоснованное количество кода css (проще уже table делать)
2. Ничтожная кроссбраузерность.
3. Нету растяжки блока, только под фиксированную ширину. В данном случае я имею ввиду фиксированную ширину нарезанных картинок.

Конкретно мне нужна растяжка блока независимо от нарезанных картинок и минимальное количество кода на выходе (ну и конечно стабильная работа в IE,ФФ, Опера). Пример блока ниже (png с альфа каналом).

PS: по бокам блока тоже тень (не бордер)...

 

[aproxis]

1. в проектах, с доплатой за поддержку ие6, я использую что-то вроде jquery.corner
2. в небольших, где это не важно - делаю на css3 c border-radius. 2010 год, можно к этому переходить

 

[maJic]

Так border-radius кто поддерживает? Только браузеры на вебките, FF да хром, это меньше 1/3 пользователей, рано в такой случае ещё на border-radius переходить. Как ещё выше сказали, один из лучших вариантов jquery.corner или же вот: Для просмотра ссылки Войди или Зарегистрируйся

 

[BAPEHbEnew]

все же самая традиционная и правильная техника для этого, по моему, это использования див-ов для каждой части бэкраунда (для левого угла один блок + для пр. угла еще один ... + для левой повторяющейся бэкграунда еще один.. = выходят 8 блоков)..
пример:
<div class"top"><div class"bottom"><div class"left"><div class"right"><div class"lt"><div class"rt"><div class"lb"><div class"rb">
здесь контент этого блока
</div></div></div></div></div></div></div></div>

в таком случае динамическая ширина и высота не страшна, и даже в ИЕ6 все будет ОК!

 

[Zak]

все же самая традиционная и правильная техника для этого, по моему, это использования див-ов для каждой части бэкраунда

Предпочитаю не дивы, а Definition list

<DL>
   <DT></DT>
   <DD></DD>
</DL>

так хоть более вменяемо, и тэги короче

 

[toxass]

Предпочитаю не дивы, а Definition list

<DL>
   <DT></DT>
   <DD></DD>
</DL>

так хоть более вменяемо, и тэги короче

А можно более четкий пример верстки на Definition list ? Даже на моем примере...думаю всем будет интересно.

 

[cepera_007]

А я использую такой способ (подходит для не замудренных случаев и пока не подводил)



CSS:

.rct, .rct2, 
.rcb, .rcb2 {
   width: 100%;
   height: 9px;
   font-size: 1px;
   background:no-repeat url(/images/roundwhite.png);
}
* html .rct, * html .rct2 ,
* html .rcb, * html .rcb2  {
   background-image:url(/images/roundwhite.gif);
}
.rct {
   background-position: -9px 0px;
}
.rct2 {
   background-position: 0px 0px;
}
.rcb {
   background-position: -9px -9px;
}
.rcb2 {
   background-position: 0px -9px;
}
.rct2, .rcb2  {
   width: 9px;
   float: right;
}
.rndc { margin: 0 9px;}

HTML:

<div class="rct"><div class="rct2"></div></div><div class="rndc">
   Ваш любой текст
</div><div class="rcb"><div class="rcb2"></div></div>

 

[Zak]

Для просмотра ссылки Войди или Зарегистрируйся

 

[hipachka]

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[serjinio]

Это блок с закруглёнными углами
Валидный

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.