Раньше при верстке сайта для создания эффекта закругленных углов использовали изображения, но благодаря развитию CSS технологий все стало намного проще и удобнее. Как сделать круглые углы с помощью свойств CSS читайте в уроке.
Как сделать круглые углы на 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>
В браузере результат:
Давайте все объясню непосредственно по коду, для начала я сделал обычный блок с фоном и обводкой в 2 пикселя назначив класс box. Теперь давайте разберем все три примера подряд.
Первый вариант у нас самый простой border-radius: 10px; этим свойством мы закругляем все четыре угла одновременно на 10 пикселей, так же можно использовать и другие значения, например em,%.. и т.д., но мне удобнее именно в пикселях.
Второй вариант у нас отражает закругление каждого угла по отдельности с разными значениями border-radius: 10px 0px 0px 10px;", то есть мы задали каждому углу свой радиус, порядок тут несложно отследить.
И третий самый интересный вариант, здесь у нас задается два параметра радиуса на один угол, тем самым создавая эллиптические углы, на рисунке наглядно показано как это выглядит:
Соответственно в примере у нас все углы такие, но можно и манипулировать как и в других примерах с каждым по своему.
Как вы видите, сложного здесь абсолютно ни чего нет, это свойство достаточно простое и получило очень широкое распространение в веб-дизайне.
Так как круглые углы на css появились не сразу старые версии браузеров могут не поддерживать это свойство для этого вы можете прописать там же два параметра которые исправят этот недочет:
-webkit-border-radius
-moz-border-radius
Просто пишем их в том же классе и прописываем те же свойства, что и border-radius. На этом все я думаю сложного тут ни чего не было и вы легко сможете делать круглые углы на своем сайте.
Разрешается републикация материалов сайта с обязательным указанием ссылки на автора
материала (указание автора, его сайта), ссылки следующего содержания:
https://for-net.ru - Как сделать сайт самому
