Создаём закругленные углы с помощью CSS

12 сентября 2010 | Автор: | Категория: Уроки вёрстки

css стили Есть множество способов закруглить углы на web-странице. Сегодня приведу пример, на мой взгляд, одного из наиболее простых вариантов создания эффекта закруглённых углов. Никаких Java-скриптов и картинок использовать не буду, только html и css. Единственный недостаток этого метода – использование пустых тегов.

Я использовал четыре пустых тега <span>, для создания эффекта закругления углов верхней границы блока и четыре для нижней границы, а также один блочный элемент <div> — он будет основой блока.

index.html

<html>
<head>
<link rel=»stylesheet» href=»style1.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»>
<center>Блок с закруглёнными углами</center>
</div>
<span class=»b4″></span><span class=»b3″></span><span class=»b2″></span><span class=»b1″></span>
</body>
</html>

style.css

/* Задаём отображение границ и углов */
.b1, .b2, .b3, .b4 {
display:block;
overflow:hidden;
}
/* Задаём высоту границ и углов */
.b1, .b2, .b3 {
height:1px;
}

.b2, .b3, .b4 {
background:#cccccc; /* Задаём цвет фона в пределах закругления */
border-left:1px solid #00346e; /* Задаём стили для левых углов */
border-right:1px solid #00346e; /* Задаём стили для правых углов */
}
/* Задаём ширину, отступы и цвет границ для закругления */
.b1 {
width: 247px;
background:#00346e;
margin:0 0 0 5;
}

.b2 {
width: 247px;
border-width: 2px;
background:#930D03;
margin:0 0 0 3;
}

.b3 {
width: 251px;
margin:0 0 0 2;
background:#930D03;
}

.b4 {
height:1px;
width: 253px;
margin:0 0 0 1;
background:#930D03;
}

.content {
background:#930D03; /* Задаём общий фон */
border:0 solid #00346e; /* Задаём стили границ */
border-width:0 1px; /* Задаём ширину границ */
width: 255px; /* Задаём ширину блока */
height: 50px; /* Задаём высоту блока */
color:#73FF63;
font-size: 15px;
font-family: Geneva, Arial, Helvetica, sans-serif; /* Задаём стили для текста */
}

/* Fix IE. Hide from IE Mac \*/
*html .b1 { width: 246; }
*html .b2 { width: 249; }
/* End */

Вот как будет выглядеть блок — Закругление углов с помощью css
Скачать Example2.zip

Для этой страницы комментарии закрыты.