наверх





Не каждый знает, как сделать округления у элемента и многие отправляются за этим к фотошопу, что не совсем будет верно. Ведь для этого случая существуют специальные CSS свойства.


В этом примере я покажу, как очень просто округлить края элемента, будь это изображение либо блок с фоном. Делается это всего одним свойством. При этом, не нужно использовать никаких JS, ведь все делается в стилях.

HTML


<div class="main">
...
</div>


CSS


.main {
background-color:#478CFB;
padding:10px;
color:white;
-webkit-border-radius: 20px; /* Для браузеров семейства Webkit (Safari, Chrome, iOS) */
-moz-border-radius: 20px;    /* Для браузеров семейства Gecko (Firefox) */
border-radius: 20px;    /* CSS3 */
}


То есть, свойство CSS3, отвечающие за округление углов у элемента, это border-radius. Так как это CSS3 свойство, то и работать оно будет лишь в современных браузерах. Проблему со старыми браузерами приходится решать посредством JS, фонового рисунка или вообще, создания округление изображения самим сервером - обрезкой.
Так же, есть еще один нюанс. Отступы (например свойство padding) не обращает внимание на округление. Поэтому если вы делаете большие скругления, то и делайте большие внутренние отступы.

Выше был показан код для создания скругления для элемента с фоном. А как же сделать скругления у изображения? Да так же. К тому же, округления краев можно задать и в пикселях:

img {
-webkit-border-radius: 40%; /* Для браузеров семейства webkit */
-moz-border-radius: 40%;    /* Для браузеров семейства Gecko */
border-radius: 40%;    /* CSS3 */
}





Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.