Пополнить WebMoney
Вывод WebMoney
Обмен WebMoney
Кредит WebMoney

Закругление углов в CSS.



чайник, HTML ДЛЯ ЧАЙНИКОВ скачать бесплатно - " HTML на примерах, всё доступно и просто (для начинающих)"
- - -чайник, HTML ДЛЯ ЧАЙНИКОВ- - -
>> с к а ч а т ь <<

чайник, HTML ДЛЯ ЧАЙНИКОВ скачать бесплатно - "Как создать классный сайт!
От начала и до конца"
---чайник, HTML ДЛЯ ЧАЙНИКОВ--->> с к а ч а т ь <<

Закругление углов в CSS - border-radius.Часто на сайте нужно использовать закругленные углы и не всегда вставка картинки это выход с положения. На помощь верстальщику пришел CCS.
С помощью CCS, можно закруглить углы быстро и так как мы захотим без вмешательства графики. Это ускоряет работу сайта, который становиться намного легче по весу и профессиональней на вид.

Закругленные углы используются часто в меню сайта,   галереях, контенте,  кнопках, поле поиска,   комментариях.   
Закругление можно сделать при помощи стиля border-radius.

Закругление углов border-radius.

Пример.

<title>Скругление углов методами CSS </title>
<style type="text/css">
div
{
font:18px Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
padding: 47px;

border: 1px solid #fff;
border-radius: 20px 0 20px 0;

/*указываем закругление для других браузеров*/
-moz-border-radius: 20px 0 20px 0;
-webkit-border-radius: 20px 0 20px 0;
}
</style>

</head>
<body>
<div>

Блок будет иметь скругленные углы.

</div>
</body>

    • -moz-border-radius – закругленные углов для браузеров Firefox.
    • -webkit-border-radius закругленные углов для браузеров Chrome.

    Результат:

    Блок будет иметь скругленные углы.

    Итак:
    border-radius: 20px  0     20px   0;
    border-radius:   1     2      3      4;

    1 – закруглене лево-верх
    2 – закруглене право-верх
    3 – закруглене право-низ
    4 – закруглене лево-низ

    Вот еще один пример.

    <title>Скругление углов методами CSS </title>
    <style type="text/css">
    div
    {
    font:18px Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    text-align:center;
    padding: 47px;

    border: 1px solid #fff;
    border-radius: 120px;
    /*указываем закругление для других браузеров*/
    -moz-border-radius: 120px;
    -webkit-border-radius: 120px;
    width: 132px
    }
    </style>

    </head>
    <body>
    <div>
    Блок будет иметь скругленные углы для браузеров Chrome и Firefox. Закругленные углы используются часто в меню сайта, галереях, контенте, кнопках, поле поиска, комментариях. Скругление углов методами CSS на сайте nocrisise.ru.
    </div>
    </body>

    Результат:

    Блок будет иметь
    скругленные углы
    для браузеров
    Chrome и Firefox.
    Закругленные углы используются часто
    в меню сайта,  
      галереях,
    контенте,  
    кнопках,
    поле поиска,   
    комментариях.
    Скругление углов
    методами CSS
    на сайте nocrisise.ru.


     

     

     

     

     

     

     

     


    дальше. -нестандартные шрифты в CSS
    чайник, CSS  ДЛЯ ЧАЙНИКОВ


    Понравилась статья? - добавь ее себе!


     

     



сайт-визитка / шаблон сайта / обработка фотографий / дизайн афиши, обложки книг, журнал, флаеры и т.д.
 
 
Подробней





nocrisise.ru © 2009-2012