Закруглённые углы на CSS3.
Привет всем и сегодня мы разберём свойство border-radius, которое позволяет сделать закруглённые уголки для любых блочных элементов на странице.
Для начала создадим простенькую html разметку
<html>
<head>
<title>border-radius</title>
<meta charset="utf-8">
</head>
<body>
<div class="block"></div>
</body>
</html>
Теперь зададим базовые стили для нашего блока.
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777;
}
Вот, что мы имеем сейчас
Давайте скруглим углы блока на 10px
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777;
border-radius: 10px;
}
Чтобы скруглить все углы, мы добавили свойство border-radius с единственным значением 10px, но мы можем задать для каждого угла своё скругление. Для этого просто перечислим 4 значения для верхнего левого, верхнего правого, нижнего правого и нижнего левого угла.
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777;
border-radius: 10px 20px 30px 40px;
}
Как видно из скриншота, все углы у нас теперь с разным скруглением. Мы можем также рассписать свойства для каждого угла отдельно
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777;
border-top-left-radius: 10px; // верхний левый угол
border-top-right-radius: 20px; // верхний правый угол
border-bottom-right-radius: 30px; // нижний правый угол
border-bottom-left-radius: 40px; // нижний левый угол
}
"Зачем это нужно, если у нас есть сокращённая форма?" - Чтобы ответить на этот вопрос, давайте рассмотрим пример
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777;
border-bottom-right-radius: 20px 40px;
}
Как видно из скриншота, наш правый нижний угол закруглён неравномерно. Т.е. по вертикали угол закруглился на 40px, а по горизонтали на 20px. Данный способ используется, когда вам нужно сделать какую-нибудь очень сложную фигуру на CSS, в остальных случаях вполне хватает сокращённой формы.
И последнее: вы можете указывать радиус закругления не только в пикселях, но и в процентах. Например, давайте сделаем идеальный круг. Для этого зададим всем углам радиус скругления 50%
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777;
border-radius: 50%;
}
-
Создано 07.04.2014 08:00:00
-
Михаил Русаков
Комментарии (5):
Да. Такое свойство как border-radius мне давно известно, но, я так понимаю, что не все браузеры его "хавают". Как быть с -moz-border-radius? -webkit-border-radius, -khtml-border-radius. Понятно, что это прописывается для мозиллы, хрома и пр. Или все-таки можно обойтись только border-radius!?
Ответить
Сейчас большинство браузеров поддерживают свойства CSS3, так что нет необходимости использовать префиксы -moz-, -webkit- и пр.
Ответить
Спасибо... я как-то это пропустил...
Ответить
я пока все равно добавляю все эти префиксы)) на всякий случай
Ответить
Здравствуйте, будет ли работать border-radius для фона при border-collapse:collapse? и если да, будет ли скругление фона отображаться корректно для разных браузеров/гаджетов?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.