Задача: найти способы закругления уголков без использования изображений.
На самом деле существует достаточно много способов решить данную проблему. Для начала, приведём пример самого распространённого способа, используемого для закругления уголков с применением четырёх картинок, которые располагаются по углам родительского блока.
Код будет такой:
<style>
div.top-left
{
background-image: url('left_top.png');
background-repeat: no-repeat;
background-position: top left;
height: 7px;
}
div.top-right
{
background-image: url('right-top.png');
background-repeat: no-repeat;
background-position: top right;
height: 7px;
}
div.bottom-left
{
background-image: url('bottom-left.png');
background-repeat: no-repeat;
background-position: bottom left;
height: 7px;
}
div.bottom-right
{
background-image: url('bottom-right.png');
background-repeat: no-repeat;
background-position: bottom right;
height: 7px;
}
</style>
<div class="box">
<div class="top-left"><div class="top-right"></div></div>
<p>пример</p>
<div class="bottom-left"><div class="bottom-right"></div></div>
</div>
Недостаток этого метода в том, что если этот метод использовать для закругления уголков у большого количества картинок или текстовых блоков, то придётся ждать загрузки большого количества не второстепенных картинок. Конечно, можно использовать и другой способ, основанный на двух изображениях, но только если блок фиксированной ширины.
Но можно добиться такого же эффекта и без использования изображений. Вот несколько способов, позволяющих добиться желаемого эффекта.
<style>
.inner-box
{
padding:1px;
}
.r1, .r3
{
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}
.r3
{
margin: 0 3px;
}
.r1
{
margin: 0 1px;
}
#rounded-box-3
{
margin:1em;
}
.inner-box
{
background-color: #CCCCCC;
}
b
{
background-color: #CCCCCC;
}
#rounded-box-3 .inner-box
{
padding: 5px 5px;
}
</style>
<div id="rounded-box-3">
<b class="r3"></b><b class="r1"></b><b class="r1"></b>
<div class="inner-box">пример</div>
<b class="r1"></b><b class="r1"></b><b class="r3"></b>
</div>
Недостаток двух этих способов заключается в том, что в коде страницы появляется много лишнего кода, а если необходимо закруглять уголки у большого количества картинок на странице, то код страницы увеличивается в несколько раз.
Но есть третий вариант решения проблемы, использовать JavaScript для обработки любых картинок или текстовых блоков. Можно использовать решение от http://swfir.com.
В начале страницы в теге <head> нужно подключить основную библиотеку.
<script type="text/javascript" src="swfir.js"></script>
<!--[if gte IE 6]><script type="text/javascript">
try { document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
</script> <![endif]-->
Далее идёт основное содержание страницы. После чего перед тегом </body> нужно вставить следующий код
<script type="text/javascript">
window.onload = function(){
round = new swfir();
round.specify('src', 'swfir.swf');
round.specify('border-color', 'ffffff');
round.specify('border-radius', '10');
round.swap("#expert");
}
</script>
Плюсы данного подхода в том, что мы можем назначить закругление уголков только определённым элементам на странице, например изображениям с id #expert.
В нашей студии вы можете заказать html вёрстку сайта. Подробнее об этой услуге вы можете прочитать в разделе html вёрстка