Закругление уголков без использования изображений

Основные элементы главной страницы веб сайта
Техническое задание

Задача: найти способы закругления уголков без использования изображений.

На самом деле существует достаточно много способов решить данную проблему. Для начала, приведём пример самого распространённого способа, используемого для закругления уголков с применением четырёх картинок, которые располагаются по углам родительского блока.

Код будет такой:

<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 вёрстка

Вы готовы начать работу или получить консультацию?

Самый простой способ - написать нам. Не стесняйтесь задавать вопросы. Мы готовы начать обсуждение вашего проекта сейчас, сделайте следующий шаг, напишите нам.