html и css скругление углов блока div
Этот метод скругления является слегка костыльным и нестандартным, но он работает практически во всех веб браухерах чем подобное свойство в css border-radius
. Бывает пригождается в определенных случаях, когда нужно сделать скругление углов чтобы не влияло на функционал и без картинок, но чтобы поддерживалось во всех старых и современных браузерах к примеру ослик IE5.5 IE6 IE7 IE8 IE9 IE10 IE11. А также поддерживало мобильные веб-браузеры без которых на сегодняшний день не малый спрос.
<style type="text/css">
.v1, .v2, .v3, .v4, .v5 {
height: 1px;
font-size: 1px;
display: block;
overflow: hidden;
border-width: 0 1px;
}
.v1 {margin: 0 5px; background:#CCC;}
.v2 {margin: 0 4px; background:#CCC;}
.v3 {margin: 0 3px; background:#CCC;}
.v4 {margin: 0 2px; background:#CCC;}
.v5 {margin: 0 1px; background:#CCC;}
</style>
<b class="v1"></b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b>
пиксельное скругление углов
<b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>
Логика такова, берем стандартные css свойства чтобы учесть все браузеры. Далее, что бы скруглить углы мы просто блок div
делаем в 1 пиксель, добавляем по краям слева и право отступ в 1 пиксель и красим цветом. Последующие div
блоки увеличиваем отступы от предыдущего на 1 пиксель. Таким образом добавляя div
блоки и увеличивая отступы с каждым разом, можно сделать больше радиус что в результате получится скругление углов на css. Если поменять порядок div
в обратную сторону, то получится тот же эффект только радиус будет смотреть вниз.
html пример скругления углов div блоком
<div style="width:200px;">
<b class="v1"></b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b>
<div style="padding:20px; background:#CCC;">
результат пиксельного скругление работающий во всех браузерах
</div>
<b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>
</div>