Сглаженные закругленные углы без использования изображений
Делаю на заказ небольшую gallery заказчик шарит в теме и хочет web 2.0. По сему стал вопрос о круглых краях в блоках. Я как-то где-то наблюдал как делаю скугления div`ами и решил посмотреть что же дает эта технология.
Вот что выяснилось. Во-первых есть небольшая куча библиотек на JS которые только и занимаются скруглением. Но исользовать здоровые и непонятно как написанные библиотеки нехотелось. Хотя нашел микрофреймворк который справляется с этой задачей на 5+.
Теперь о способе который выбрал я для своих нужд (но в последствии я его отбросил ввиду гемморойности внедрения). Он довольно простой и не отнимает много времени у браузера. Прошу считать это лишь как тренировка CSS навыков.
Это у нас стили.
block {width: 500px;margin: 30px auto 15px;}
.v1, .v2, .v3, .v4, .v5 {
height: 1px;
font-size: 1px;
display: block;
overflow: hidden;
border: 1px solid #B8C3C8;
border-width: 0 1px;}
.v1 {margin: 0 5px; background: #B8C3C8;}
.v2 {margin: 0 3px; border-width: 0 2px;}
.v3 {margin: 0 2px;}
.v4 {margin: 0 1px;}
.v5 {margin: 0 1px;}
Это HTML
<div id="v2">
<b class="v1"></b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b>
<div class="text">
<h1>2. Простое закругление углов с помощью CSS</h1>
Здесь каждый угол состоит из пяти расположенных специальным образом пикселей.
</div>
<b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>
</div>
Вот вроде и все. Кстати это пример с сайта
Так-же советую псмотреть этот пример. Там достаточно хорошо все оптимизированно и есть градиенты (заливки) со скругленными углами.
UPDATE: -moz-border-radius и -webkit-border-radius это специфические свойтва браузера, которые эмулируют свойтво border-radius в CSS3. В Google Chrome, FF3 и Safari 3.1 уже работает border-radius. Полный список:
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
а для закругления отдельных углов подойдет следующее
-khtml-border-radius-bottomleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
Еще можно почитать по теме
