Этот урок CSS, расскажет Вам об одном из самых простых и удобных способов создания закруглённых углов.
Итак, попробуем сделать...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
.b1, .b2, .b3, .b4 {
display:block; /* Задание отображения границ и углов */
overflow:hidden; /* Задание отображения границ и углов */
}
.b1, .b2, .b3 {
height:1px; /* Задание высоты границ и углов */
}
.b2, .b3, .b4 {
background:#ffedbe; /* Задание цвета фона в пределах закругления */
border-left:1px solid #00346e; /* Задание стилей левых углов */
border-right:1px solid #00346e; /* Задание стилей правых углов */
}
.b1 {
margin:0 5px; /* Задание отступов */
background:#00346e; /* Задание цвета верхней и нижней границ */
}
.b2 {
margin:0 3px; /* Задание отступов */
border-width:0 2px; /* Задание ширины границы */
}
.b3 {
margin:0 2px; /* Задание отступов */
}
.b4 {
height:2px; /* Задание высоты границ и углов */
margin:0 1px; /* Задание отступов */
}
.content {
background:#ffedbe; /* Задание общего фона */
border:0 solid #00346e; /* Задание стилей границ */
border-width:0 1px; /* Задание ширины границ */
}
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<span class="b1"></span><span class="b2"></span><span class="b3"></span><span class="b4"></span>
<div class="content">
Содержание блока
</div>
<span class="b4"></span><span class="b3"></span><span class="b2"></span><span class="b1"></span>
</body>
</html>
4) Сохраняем и смотрим, что получилось.
Вот так, сравнительно просто можно закруглить углы блоков без использования картинок.
Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx Oprea 7.хх - 9.xx
Идея: Stu Nicholls
По материалам сайта:
Российская школа CSS
