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

CSS

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

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

Часто на сайте нужно использовать закругленные углы и не всегда вставка картинки это выход с положения. На помощь верстальщику пришел 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>

Читайте также:  CSS селекторы

Результат:

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

 

Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий