увеличить радиус округления уголков

Тема в разделе "Веб-дизайн", создана пользователем ufaclub, 19 сен 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. ufaclub

    ufaclub

    Регистр.:
    1 май 2007
    Сообщения:
    394
    Симпатии:
    17
    PHP:
    <div id="rounded-box-3">
        <
    class="r3"></b><class="r1"></b><class="r1"></b>
        <
    div class="inner-box">
            <
    h3>Элемент с закругленными углами R=3px</h3>
            <
    p>Этот способ закругления углов подсмотрен на GMail.</p>
        </
    div>
        <
    class="r1"></b><class="r1"></b><class="r3"></b>
    </
    div>

    css

    PHP:

    .r1, .r2, .r3 {
        
    displayblock;
        
    height1px;
        
    overflowhidden
        
    font-size:1px;
    }

    .
    r3 margin0 3px; }
    .
    r2 margin0 2px; }
    .
    r1 margin0 1px; }


    #rounded-box-3 .inner-box, #rounded-box-3  b {
        
    background-color#294d67;
    }

    .
    inner-box {
        
    padding:1em;
    }



    как увеличить радиус до 5 px?
     
  2. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    поскольку скругление делается блоками уменьшенной ширины, просто увеличьте кол-во блоков, примерно так:

    PHP:
    .r1, .r2, .r3, .r4, .r5 {
        
    displayblock;
        
    height1px;
        
    overflowhidden
        
    font-size:1px;
    }
     
    .
    r5 margin0 5px; }
    .
    r4 margin0 4px; }
    .
    r3 margin0 3px; }
    .
    r2 margin0 2px; }
    .
    r1 margin0 1px; }


     
    ufaclub нравится это.
  3. ufaclub

    ufaclub

    Регистр.:
    1 май 2007
    Сообщения:
    394
    Симпатии:
    17

    походу надо еше чет изменить в выводе? потому что изменик css ничего не измненилось....



    PHP:
    <div id="rounded-box-3">
        <
    class="r3"></b><class="r1"></b><class="r1"></b>
        <
    div class="inner-box">
            <
    h3>Элемент с закругленными углами R=3px</h3>
            <
    p>Этот способ закругления углов подсмотрен на GMail.</p>
        </
    div>
        <
    class="r1"></b><class="r1"></b><class="r3"></b>
    </
    div>  

     
  4. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    ну разумеется
    выше и ниже нужного блока ставьте необходимое кол-во
    PHP:
    <class="r*">
    вместо звездочки - номер нужного класса
    поэксперементируйте, кроме круглых углов можно добиться занимательных эффектов - например "вогнутые" углы или блоки бочкообразной формы...
     
Статус темы:
Закрыта.