Rambler's Top100

РАМКИ С ЗАКРУГЛЁННЫМИ УГЛАМИ

Рамки с закруглёнными углами можно применять для оформления блоков рекламы, блоков меню, почтовых форм, рекламных баннеров, закруглять углы картинок и так далее на что xватит фантазии. В CSS для закругления углов применяется атрибут border-radius

Делается это так - в файле css создаёте класс, например .framekrug, затем определяете размеры ширины (width) и высоты (height) прямоугольника, фоновый цвет прямоугольника, толщину бордюра и стиль рамки. В файле CSS записываем следующий код:

.framekrug{
width:200px;
height:100px;
background:#FFE4C4;
border: 3px #8B0000 solid;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius:20px;
border-radius: 20px;
}

В HTML - файле присваеваем блоку данный класс <div class="framekrug"></div>. В результате у вас получится закругление углов как фигура-1. Текст в такой блок вставляется как обычно между тегами <div>Фигура-1 </div>

Чтобы закругление сторон было разным как фигура-2, в файле CSS атрибуту border-radius укажем размеры радиуса всех четырех сторон

.framekrug{
width:200px;
height:100px;
background:#FFE4C4;
border: 3px #8B0000 solid;
-moz-border-radius: 20px 20px 0 0;
-webkit-border-radius: 20px 20px 0 0;
-khtml-border-radius:20px 20px 0 0;
border-radius: 20px 20px 0 0;
}

Таким образом меняя размеры радиуса, можно создавать различные фигуры, например:
фигуры-3 - border-radius: 150px 150px 0 0;
фигуры-4 - border-radius: 160px 160px 160px 160px;
фигуры-5 - border-radius: 0 180px 0 200px;

Чтобы в блоки таких фигур вставить картинку, нужно подобрать картинку соответствующею размеру блока или задать блоку размеры соответствующие размерам картинки и в свойстве background-image: указать путь к картинке

.framekrug2{
width: 223px;
height: 232px;
background-image: url(images/1.jpg);
border: 5px solid #FF00AE;
border-radius: 160px 160px 160px 160px;
-moz-border-radius: 160px 160px 160px 160px;
-webkit-border-radius: 160px 160px 160px 160px;
-moz-border-radius: 160px 160px 160px 160px;
}

Так же можно создавать такие фигуры размещая код непосредственно в HTML файле

<div style="background: url('images/6.jpg'); width: 252px; height: 256px; border: 7px solid #0BFAFF; border-radius: 120px 200px 0 180px; -webkit-border-radius: 120px 200px 0 180px; -moz-border-radius: 120px 200px 0 180px;"></div>

 

 

Rambler's Top100 Яндекс цитирования