Скругление углов CSS3
Сегодня хочу рассказать о таком свойстве CSS3, как border-radius, позволяющее создать закругленную границу вокруг прямоугольного блока.
Backgrounds and Borders module на данный момент всё ещё остается черновым документом W3C, поэтому при именовании свойства border-radius браузеры используют вендорные префиксы:
- -moz- используется в браузерах на основе движка Gecko (Firefox и SeaMonkey)
- -webkit- в браузерах на основе одноименного движка (Safari и Chrome)
Браузер Opera обходится без вендорного префикса, ну а IE, оправдывая своё народное название "осла", вовсе не поддерживает данного свойства.
Скругление углов средствами CSS3. В данном примере не используется JS или картинки.
Для скругления углов, как в примере выше, элементу div были назначены следующие свойства: ширина бордюра 5 пикселей, радиус скругления углов 20 пикселей. Причем для правильного отображения в разных браузерах были добавлены вендорные префиксы.
border:5px solid #545751; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;
В этом примере свойство border-radius используется в простейшей форме, закругляя все четыре угла блока с одинаковым радиусом. Можно задать каждому углу свой радиус скругления, перечисляя значения начиная сверху и по часовой стрелке.
При указании двух или трех значений, пропущенные значения берутся из противоположных углов (top, right, bottom, left). Следующие примеры буду писать без вендорных префиксов, собственно подставить их не трудно.
C этим, полагаю разобрались, ничего сложного тут нет. Более интересная задача - скругление углов у изображений.
Задача интересна прежде всего тем, что нужно добиться скругления углов у изображения ещё и с определенной рамкой, не зависимо от фона и размеров картинки, и возможностью задавать радиус скругления. На первый взгляд задача не выполнимая.
Берем любую картинку и пробуем в лоб применить к ней свойство border-radius.
<img class="img-radius" src="/uploads/testimg.jpg" />
CSS код:
.img-radius { border:2px solid #222; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; }
Получили явно не то, что ожидали, бордюр со скруглением есть, а вот картинка как была, так и осталась...
Решение довольно простое - предлагаю использовать картинку в качестве фона элемента div.
<div class="img-radius" style="background:url(/uploads/testimg.jpg); width:250px; height:162px"><div>
Вот теперь получили желаемый результат - скругление работает. Смущает один момент, а именно необходимость вручную указывать размеры картинки.
Чтобы этого не делать, вставим внутрь нашего блока <div> ту же картинку с указанием ей свойства visibility:hidden, т.е. сделаем её невидимой. В результате картинка будет распирать содержащий её контейнер и сама задаст необходимые размеры нашему блоку с бэкграундом.
<div class="img-radius" style="background:url(/uploads/testimg.jpg)"><img src="/uploads/testimg.jpg" /><div>
CSS код:
.img-radius { border:border:2px solid #222; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; } .img-radius img { display: block; visibility: hidden; }
И напоследок про костыли для IE. Даже это тупое животное можно научить закруглению углов, но тут не обойтись без сторонней библиотеки CSS3 Pie. Данная библиотека реализует многие CSS3 свойства в IE6-8, в том числе и border-radius (кстати, весит всего 28Кб). Для её подключения потребуется в CSS классу .img-radius добавить строчку:
.img-radius { ... behavior: url(css/PIE.htc); }






Комментариев: 4
Ошибка.
Спасибо, опечатался, уже поправил
Радиусы у EI9 - работают.
Скругление на IE не работало, поменял behavior: url(css/PIE.htc); на behavior: url(css/PIE.php); заработало, странно :)