Как сделать блок (рамку) для сайта с закруглёнными углами?

Классика классик веб-строительства :) А мой совет прежний - не ждать повсеместной поддержки CSS 3.0, в котором есть свойство border-radius, а по старинке сделать на картинках. Для несложных случаев вполне подойдёт приведённая ниже функция на PHP, рисующая блок нужного размера (параметр $height - высоту блока - можно не передавать). 8-х, а то и 6-х Internet Explorer'ов ещё довольно много, а их счастливые обладатели никаких border-radius'ов не увидят...

function block1 ($content, $width, $height=0) { 
 echo '<table width="'.$width.'" ';
 if ($height>0) echo 'height="'.$height.'" ';
 echo 'border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
 <td width="12" height="13" nowrap><img src="img/l-u2.gif" width="12" height="13"></td>
 <td height="13" background="img/b-f2.gif"><img src="img/1.gif" width="1" height="1"></td>
 <td width="14" height="13" nowrap><img src="img/r-u2.gif" width="14" height="13"></td>
</tr>
<tr>
 <td width="12" background="img/l-f2.gif" nowrap><img src="img/1.gif" width="1" height="1"></td>
 <td valign=middle>'.$content,'
 </td>
 <td width="14" background="img/r-f2.gif" nowrap><img src="img/1.gif" width="1" height="1"></td>
</tr>
<tr>
 <td width="12" height="13" nowrap><img src="img/l-b2.gif" width="12" height="13"></td>
 <td height="13" background="img/d-f2.gif"><img src="img/1.gif" width="1" height="1"></td>
 <td width="14" height="13" nowrap><img src="img/r-b2.gif" width="14" height="13"></td>
</tr>
</table>';
}

Вызов этой функции вида

block1 ("Содержимое блока",400,200);

нарисует примерно то же, что показано здесь, а вот здесь можно скачать HTML-код блока с картинками. Разумеется, их качество неплохо бы повысить.

Ну и самый правильный и современный способ: jQuery плюс плагин Corner по этой ссылке: http://www.malsup.com/jquery/corner/. Чтобы установить, достаточно примерно следующего:

<script type="text/javascript" src="jsquery.js"></script>
<script type="text/javascript" src="corner.js"></script>
<div class="myCorner" data-corner="20px" style="background-color:yellow;padding:10px;">
http://www.malsup.com/jquery/corner/
<br>текст раздела ла-ла-ла
</div>
<script type="text/javascript">
$('.myCorner').corner();
</script>

Вот что у меня для этого кода вышло:

Пример применения JQuery с плагином Corner

Надо заметить, что ни тут, ни на странице примеров Corner, у блоков с закруглёнными краями нет рамок, не вникал, можно ли сделать средствами этого плагина. Ну и без Javascript никаких закруглений, разумеется, не будет.

28.04.2011, 15:23 [14941 просмотр]