Закругление углов блока средствами HTML/CSS

Дата публикации: 2010-12-28

закругление улов в CSS

От автора: Часто перед начинающим верстальщиком возникает ряд задач, которые ему нужно разрешить для выполнения верстки страницы. Одна из наиболее часто встречаемых проблем – это закругление углов блока средствами HTML/CSS.

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1

Создайте папку (например, folder) и поместите в ее директорию простую HTML страницу (например, index.html). Эта страница должна содержать следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Урок 1</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="top_corners">
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
</div>
<div class="content">
<p>Данный блок закруглен без использования картинок</p>
</div>
<div id="down_corners">
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</div>

<p>Данный блок закруглен без использования картинок</p>

</div>

</div>

</body>

</html>

Для того чтобы понять где, что и как, мы разберем код нашего файла index.html более подробно.

Итак, "xb1","xb2","xb3","xb4","xb5","xb6","xb7"- это блоки, при помощи которых и создаются наши закругленные углы. Данные блоки расположены горизонтально один под другим, как пешеходная зебра, к примеру. Т.е. вначале идет блок "xb1", затем блок "xb2", после этого блок "xb3"и так до блока "xb7" включительно. Все блоки отличны, либо равны, по своей ширине от блока "соседа" (в противном случае закругления углов блока у нас не было бы, в итоге мы получили бы обычный прямоугольник).

Блок "top_corners" — блок, в котором расположены блоки "xb1","xb2","xb3","xb4","xb5","xb6","xb7" в порядке возрастания. За счет данной последовательности ("xb1","xb2",…,"xb7") образуются верхние закругленные правый и левый углы нашего блока.

Блок "down_corners" — блок, в котором расположены блоки "xb7","xb6","xb5","xb4","xb3","xb2","xb1" в порядке убывания. Если придерживаться этой последовательности ("xb7","xb6",…,"xb1",), то у нас образуются закругленные нижние правый и левый углы.

Т.о., мы создали все четыре закругленных угла блока (при помощи блоков "xb1","xb2",…,"xb7"). Но у вас наверняка возникнет вопрос: " – Зачем нам блок "content"?". Данный блок является контентной частью нашего блока (блока с закругленными углами). Если в блоке должна располагаться какая-либо информация, то ее необходимо прописывать именно в рамках блока "content".

Теперь мы понимаем, что наш создаваемый блок с закругленными углами состоит из 3-х подблоков.

Также вашему вниманию хочу привести увеличенное изображение левого верхнего угла блока:

закругление улов в CSS

А также нижнего левого:

закругление улов в CSS

Шаг 2

После этого в папке folder мы создаем еще одну папку (например, style). Затем в нее мы помещаем файл-CSS (например, style.css), который должен содержать следующий код:

#container{
width: 100%;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7{
display: block;
overflow: hidden;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6{
height: 1px;
}
.xb1{
margin: 0 8px;
background: #7f7f9c;
}
.xb2{
margin: 0 6px;
background: #7f7f9c;
}
.xb3{
margin: 0 4px;
background: #7f7f9c;
}
.xb4{
margin: 0 3px;
background: #7f7f9c;
}
.xb5{
margin: 0 2px;
background: #7f7f9c;
}
.xb6{
margin: 0 2px;
background: #7f7f9c;
}
.xb7{
margin: 0 1px;
background: #7f7f9c;
height: 2px;
}
.content{
display: block;
height: 100px;
background: #7f7f9c;
}
.content p{
font-size: 2.5em;
color: #fc0;
margin: 0 10px;
letter-spacing: 1px;
}
.top_corners{
margin: 0;
padding: 0;
}
.down_corners{
margin: 0;
padding: 0;
}

#container{

width: 100%;

}

.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7{

display: block;

overflow: hidden;

}

.xb1, .xb2, .xb3, .xb4, .xb5, .xb6{

height: 1px;

}

.xb1{

margin: 0 8px;

background: #7f7f9c;

}

.xb2{

margin: 0 6px;

background: #7f7f9c;

}

.xb3{

margin: 0 4px;

background: #7f7f9c;

}

.xb4{

margin: 0 3px;

background: #7f7f9c;

}

.xb5{

margin: 0 2px;

background: #7f7f9c;

}

.xb6{

margin: 0 2px;

background: #7f7f9c;

}

.xb7{

margin: 0 1px;

background: #7f7f9c;

height: 2px;

}

.content{

display: block;

height: 100px;

background: #7f7f9c;

}

.content p{

font-size: 2.5em;

color: #fc0;

margin: 0 10px;

letter-spacing: 1px;

}

.top_corners{

margin: 0;

padding: 0;

}

.down_corners{

margin: 0;

padding: 0;

}

Теперь мы подробно рассмотрим код файла style.css, т.к. именно тут задаются те параметры свойств, которые в совокупности и дали нам возможность закруглить углы блока.

Начнем со свойств display: block; и overflow: hidden;, которые заданы для блоков "xb1"," xb2",…,"xb7". Эти свойства предназначены для того, чтобы блоки "xb1", "xb2",…,"xb7" выстраивались друг за другом (блочное расположение).

Для каждого блока задан свой цвет (background: #7f7f9c;) и свой отступ при помощи свойства margin.

Разберем свойства блоков "xb1", "xb2",…,"xb7" на примере блока "xb1":

.xb1{

margin: 0 8px; — отступ блока слева и справа в 8 пикселов от блока "container". Значение "0" –это отсуп блока сверху и снизу относительно блока "container" (сверху) и блока "xb2" (снизу);

background: #7f7f9c; — цвет блока.

}

Аналогично и с блоками "xb2","xb3",…,"xb7" (каждый имеет свой отступ). Можно сказать, что свойство margin в данной рассматриваемой теме является ключевым. Но не стоит забывать про свойство height, т.к. именно оно задает высоту блока (для блоков "xb1", "xb2",…,"xb6" она равна 1 пиксель, для "xb7" – 2 пикселя ).

Рассмотрим свойства блока "content". Они такие же, как и у блоков "xb1", "xb2",…,"xb7", но отличие есть только в величине высоты блока (она равна 100 пикселей). При помощи данного свойства мы можем увеличивать и уменьшать высоту блока с закругленными углами (об этом мы поговорим чуть позже).

У блока "container" есть всего лишь одно свойство width. Оно помогает нам задать ширину блока с закругленными углами. Изменения ширины блока за счет данного свойства будут рассмотрены ниже.

Блоки "top_corners" и " down_corners" являются вспомогательными. Функциональной нагрузки не несут. При желании их можно удалить – все останется на своих прежних местах. Они введены для более ясного представления кода.

После того, как выполнены пункты 1 и 2, в окне нашего браузера появился блок с закругленными углами:

закругление улов в CSS

"Да, блок с закругленными углами есть, но он же растянут на всю ширину окна браузера, да и высота у него не та, что мне нужно", — скажете Вы. Но переживать по этому поводу не стоит. Данный блок можно задавать любой нам необходимой как ширины, так и высоты.

Для этого нам необходимо ознакомиться более подробно с файлом style.css., а именно вот с этими элементами и их свойствами:

#container{
width: 100%;
}
и

.content{
display: block;
height: 100px;
background: #7f7f9c;
}

#container{

width: 100%;

}

.content{

display: block;

height: 100px;

background: #7f7f9c;

}

За ширину создаваемого блока отвечает блок "container".

Как мы можем увидеть, в элементе container задана ширина блока 100% (т.е. блок тянется и располагается на всю ширину экрана браузера). Для ее изменения нам нужно изменить параметр свойства ширины блока width (сейчас он равен у нас 100%). Поставим, к примеру, 600 пикселей:

#container{
width: 600px;
}

#container{

width: 600px;

}

После внесения вышеуказанных изменений наш блок стал выглядеть так:

закругление улов в CSS

Для того чтобы задать нужную высоту блока, необходимо в свойствах блока "content" изменить параметр свойства высоты блока height (сейчас он равен у нас 100px). Зададим высоту блока, равную, например, 300 пикселей:

.content{
display: block;
height: 300px;
background: #7f7f9c; 
}

.content{

display: block;

height: 300px;

background: #7f7f9c;

}

Теперь наш блок выглядит вот так:

закругление улов в CSS

Шаг 3

В завершении темы хотел бы поговорить еще об одной немаловажной детали – это радиус закругления угла блока. Как Вы уже поняли, закругленный угол создается именно по средствам наложения одного блока на другой (увидеть это можно на увеличенном изображении левого верхнего угла, а также левого нижнего, которое я приложил выше). Для того чтобы увеличить радиус закругления Вам просто необходимо добавить n блоков "xbn". Каждый новый блок должен иметь совершенно другое значение свойства height и margin от предыдущего. За счет этого и будет достигнут закругленный угол.

Т.о., чем больше у вас используется блоков «xbn», тем больше радиус закругления угла блока.

Также прилагаю подробную карту блоков для того, чтобы было проще во всем ориентироваться:

закругление улов в CSS

На этом у меня все. Спасибо за внимание.

Заключение

В этом уроке мы научились закруглять углы блоков средствами HTML/CSS. Рассмотрен метод "закругление углов блока при помощи позиционного построения блоков" закругления углов блока. Существуют еще несколько способов закругления углов блока (например, при помощи картинок; средствами CSS3, JS), но их мы рассмотрим уже в следующий раз.

Хотелось бы выделить преимущества и недостатки рассмотренного метода:

— преимущества:
1. Этот метод исключает возможность некорректного отображения web-страницы в браузере, что является явным недостатком метода "закругление углов блока при помощи картинок" (если отключить отображение картинок в окне браузера при использовании "закругление углов блока при помощи картинок", то блок будет отображен некорректно – отсутствие закругленных углов);
2. Понятный и легкий в использовании код;
— недостатки:
1.Нужно использовать много блоков, чтобы создать один с закругленными углами.