Как округлить уголки на CSS?
Существует много способов округления элементов html разметки: дивов, блоков, слоёв, div, layer. Свойства CSS 3 позволяют округлить любой блок без каких либо усилий. Но это, только CSS 3, который пока понимает только Mozilla Firefox 3. Все остальные браузеры пока игнорируют новое детище W3C.
Создаем округленные уголки с помощью рисунка или рисунков:
Чтобы округлить уголок любого элемента нужно, для начала, нарисовать круг определённого радиуса. Этот круг можно порезать на 4 одинаковых кусочка. Для тех, кто понимает в CSS 2.1 больше, скажу что этот круг резать на кусочки не обязательно. Можно использовать один цельный круг, который будет подставляться в разные блоки, с разным смещением. Ну что же, приступим к делу:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
*{
background:none;
padding:0;
margin:0;
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
font-family:"Times New Roman";
font-size:14px;
}
#info{
position:relative;
top:5%;
margin:0 auto;
width:90%;
height:90%;
background-color:#b0d7fc;
border:2px solid #79b2f4;
}
#top_ok{
position:relative;
width:100%;
height:10px;
margin-top:-10px;
}
#top_ok #left_ok{
position:relative;
float:left;
top:8px;
left:-2px;
width:10px;
height:10px;
overflow:hidden;
background:url(kryg.gif) no-repeat scroll top left;
}
#top_ok #right_ok{
position:relative;
float:right;
top:8px;
left:2px;
width:10px;
height:10px;
overflow:hidden;
background:url(kryg.gif) no-repeat scroll top right;
}
#bottom_ok{
position:relative;
top:5%;
margin:0 auto;
width:90%;
height:10px;
z-index:0;
}
#bottom_ok #bleft_ok{
position:relative;
float:left;
top:-10px;
left:-2px;
width:10px;
height:10px;
overflow:hidden;
background:url(kryg.gif) no-repeat scroll bottom left;
}
#bottom_ok #bright_ok{
position:relative;
float:right;
top:-10px;
left:2px;
width:10px;
height:10px;
overflow:hidden;
background:url(kryg.gif) no-repeat scroll bottom right;
}
</style>
</head>
<body>
<div id="info">
<div id="top_ok"><div id="left_ok"></div><div id="right_ok"></div></div>
111<br>111<br>
</div>
<div id="bottom_ok"><div id="bleft_ok"></div><div id="bright_ok"></div></div>
</body>
</html>
Выше приведенный пример не будет работать, так как ему не хватает рисунка. Для того, чтобы посмотреть работоспособность примера скачайте, и разархивируйте этот архив. Надеюсь, у вас не будет проблем. Единственное, что IE 6 старой версии может отказаться принимать background:url(kryg.gif) no-repeat scroll bottom left, так как MS, сначала, забыл описать свойство bottom. Бывает. У нормальных версиях IE 6 всё работает как надо.
Теперь немного о примере:
Див info информационный блок, который мы и будем округлять. top_ok и bottom_ok – это наши контейнеры, в которых будут находиться рисунки уголков для округления. right_ok, left_ok, bright_ok, bleft_ok –это и есть наши рисунки уголков, которые прикреплены background дом к диву.
Вы спросите, почему я сделал всё одним кругом? Ведь так намного сложнее. Для этого округления уголков используется один рисунок потому, что загрузив эго у нас сразу видно все уголки сразу, а не приходиться ждать, когда все рисунки, разные, загрузяться по очереди. Плюс, будуть отображаться не одновременно.