Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Как сделать круглые углы на CSS

Создание закругленных углов на CSS появилось только в последней версии языка, а именно CSS3, вообще там много чего хорошего появилось но сейчас, о углах. На самом деле все намного проще, чем могло показаться, данная возможность реализуется по средствам border-radius. В использовании CSS для создания таких углов, куча преимуществ, во-первых это намного быстрее и проще и нет ни какой перегрузки графики на сайте, что влияет на скорость загрузки сайта, а как известно это достаточно немаловажный фактор для внутренней поисковой оптимизации. Давайте рассмотри все непосредственно на примере, в котором я покажу несколько блоков, с различными возможностями применения свойства border-radius. Возьмем код с несколькими блоками:

<!DOCTYPE html>
<html>
<head>
<title>Круглые углы CSS</title>
<meta charset="windows-1251">
<meta http-equiv="content-language" content="ru">
<style>
.box {
width: 400px;
height: 70px;
background: #d3d3d3;
border: 2px solid #000;
}
</style>
</head>
<body>
<div class="box" style="border-radius: 10px;">Самое простое закругление всех углов</div>
<br />
<div class="box" style="border-radius: 10px 0px 0px 10px;">Закругление двух углов</div>
<br />
<div class="box" style="border-radius: 40px/10px">Вытянутые углы</div>
</body>
</html>

В браузере результат:

Пример круглых углов на css

Давайте все объясню непосредственно по коду, для начала я сделал обычный блок с фоном и обводкой в 2 пикселя назначив класс box. Теперь давайте разберем все три примера подряд.

Первый вариант у нас самый простой border-radius: 10px; этим свойством мы закругляем все четыре угла одновременно на 10 пикселей, так же можно использовать и другие значения, например em,%.. и т.д., но мне удобнее именно в пикселях.

Второй вариант у нас отражает закругление каждого угла по отдельности с разными значениями border-radius: 10px 0px 0px 10px;", то есть мы задали каждому углу свой радиус, порядок тут несложно отследить.

И третий самый интересный вариант, здесь у нас задается два параметра радиуса на один угол, тем самым создавая эллиптические углы, на рисунке наглядно показано как это выглядит:

Пример круглых углов на css

Соответственно в примере у нас все углы такие, но можно и манипулировать как и в других примерах с каждым по своему.

Как вы видите, сложного здесь абсолютно ни чего нет, это свойство достаточно простое и получило очень широкое распространение в веб-дизайне.

Так как круглые углы на css появились не сразу старые версии браузеров могут не поддерживать это свойство для этого вы можете прописать там же два параметра которые исправят этот недочет:

-webkit-border-radius
-moz-border-radius

Просто пишем их в том же классе и прописываем те же свойства, что и border-radius. На этом все я думаю сложного тут ни чего не было и вы легко сможете делать круглые углы на своем сайте.

Дата публикации:2014-10-01


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget