Закруглённые углы на jquery

вопрос

Я видел на одном из сайтов красивые закруглённые уголки, но при сохранении исходного кода я ничего не понял. Мне сказали, что это сделано с помощью jquery. Подскажите как лучше и проще сделать закруглённые углы?

Ответил: ПафНутиЙ

На самом деле очень просто!

Открываем файл main.tpl и добавляем перед

</head>

следующий код:

<script type="text/javascript">
$(function (nice_corners) {
$('div[class*=corner]').append('<abbr class="tr"><abbr class="tl"></abbr></abbr><abbr class="br"><abbr class="bl"></abbr></abbr>');
});
</script>

Далее открываем style.css и пишем следующее:

.corner abbr {display:block; position:absolute; height:10px; background-image: url(../images/corner.png);}
.corner abbr.tr {top:0; right:0; background-position:100% 0; width: 100%;}
.corner abbr.tl {top:0; left:0; width: 10px;}
.corner abbr.br {bottom:0; right:0; background-position:100% 100%; width: 100%;}
.corner abbr.bl {bottom:0; left:0; background-position:0 100%; width: 10px;}

 

.block {
background: #f1f1f1 url(../images/br_news.gif) repeat-y 0 0;
padding: 10px 14px;
position: relative;

width: 600px;
 }

где corner.png это примерно вот такая длинная "сосиська"

Закруглённые углы на jquery

bg_block.gif - картинка высотой 1px и шириной 600px - для создания фона.

10px - высота картинки corner.gif делённая на 2, оно же радиус закругления углов.

В .tpl пишем чтото типа этого:

<div class="block corner">
тут контент
 </div>

Таким образом при обработке блоков с классом .corner внутрь будет добавлен дополнительный код, отвечающий за 4 угла. При этом в TPL будет только 1 div, а в случаи отключения javascript в браузере ничего особенно страшного не произойдёт.

UPD 10.07.2011

можно ещё воспользоваться библиотекой, предложенной в комментариях: RoCon