Ну вот и начинаем. Предыдущий пост был о том, что пора привыкать к благим новшествам CSS3. Сегодняшний пост нам наглядно продемонстрирует силу и удобство свойства border-radius.
Долгое время, для того, чтобы создать закругленные углы у бокса, верстальщикам приходилось идти на всяческие уловки. Но border-radius решил этот вопрос положительно раз и навсегда. С помощью этого свойства вы сможете задавать произвольный радиус закругления для вашего блока, вплоть до превращения его в круг. Кроме того, предусмотрены свойства, позволяющие закруглить любой из углов блока отдельно. Например, для верхнего правого угла используется свойство border-top-right-radius. Если для этого свойства будут заданы два числа, то граница будет эллиптической. Назначить данное свойство можно любому элементу за исключением таблицы, если у нее свойство border-collapse установлено в collapse. Подробнее о border-radius можно почитать на сайте W3C в рабочих записках по CSS3.
Как будет выглядеть автобус можно увидеть на картинке в начале поста. Живой пример можно посмотреть здесь, так же можете скачать его себе.
Да, я уже говорил, что не любитель изобретать велосипеды, автобусы, кстати, тоже 🙂 За автобус спасибо gozdeberberoglu.com.
Updated (27.02.09): Пример работает на данный момент в браузерах с поддержкой CSS3. На сто процентов верно для Firefox 3.x и Safari 3.x — 4 beta.
P.S.
Магазин он-лайн товаров — очень удобно. Кто скажет, что нет?
приворот без предоплаты — как вам? «Утром стулья — вечером деньги». Выгодно…
Виктор
А в каких не будь браузерах это сейчас работает, не в курсе?
Hiway
Забыл написать. Пример сто процентов работает в Firefox 3.x и в Safari 3.x — 4 beta
Никоалй
Исправьте заголовок атобус 🙂