скачать бесплатно — » 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>
Результат:
Блок будет иметь
скругленные углы
для браузеров
Chrome и Firefox.
Закругленные углы используются часто
в меню сайта,
галереях,
контенте,
кнопках,
поле поиска,
комментариях.
Скругление углов
методами CSS
на сайте nocrisise.ru.