Закругленные углы таблицы и блока

Вариант 1 - один фоновый рисунок

Нефрит

Камни-целители, хранители и защитники от скверны. К ним относится весь род нефритов. Нефрит, жадеит, жад - это родственные камни, разные очень, от зеленоватых до белых, розоватых, голубых, оранжевых.

Цвет нефрита колеблется от серого до травяно-зеленого, может быть желтым, голубым и черным. Интенсивность окраски меняется в зависимости от содержания в составе минерала окислов железа. Рисунок

HTML

<table id="table">
<tr>
<td class="td1">
<p>
Текст
</p>
</td>
</tr>
</table>

CSS

#table {
margin : 0 auto;
padding : 0;
width:600px;
}
.td1 {
width:600px;
height:223px;
background: url('images/b_b.png') no-repeat;
margin : 0;
padding : 10px 24px 14px 22px;
color : #866057;
}

Вариант 2 - три фоновых рисунка, резиновый


Нефрит

Камни-целители, хранители и защитники от скверны. К ним относится весь род нефритов. Нефрит, жадеит, жад - это родственные камни, разные очень, от зеленоватых до белых, розоватых, голубых, оранжевых.

Цвет нефрита колеблется от серого до травяно-зеленого, может быть желтым, голубым и черным. Интенсивность окраски меняется в зависимости от содержания в составе минерала окислов железа. Часто присутствующие коричневые полоски являются результатом окисления железа по трещинам в камне.

Турмалин

Название камня произошло от сингальского Turamali или разноцветный. Этот камень был завезен в Европу голландскими моряками с острова Цейлон. Однако, в России, турмалин был известен раньше, еще с 16 века. Самой замечательной особенностью этого минерала является его полихромность — многоцветность. При этом окраски изменяются от синей и зеленой до розовой и бесцветной.

Рисунки

HTML

<table id="table">
<tr>
<td class="top"></td>
</tr>
<tr>
<td class="page">
<p>
Текст
</p>
</td>
</tr>
<tr>
<td class="bottom"></td>
</tr>
</table>

CSS

#table {
margin : 0 auto;
padding : 0;
width:600px;
border-collapse: collapse;
}
.top {
background : url('images/top.png') no-repeat;
height : 22px;
padding : 0;margin : 0;
}
.page {
background : url('images/center.png') repeat-y;
padding : 1px 24px 14px 22px;margin : 0;
}
.bottom {
background : url('images/bottom.png') no-repeat;
height : 22px;
padding : 0;margin : 0;
}

Вариант 3 - блок с закругленными краями (без графики)

    

Нефрит

Камни-целители, хранители и защитники от скверны. К ним относится весь род нефритов. Нефрит, жадеит, жад - это родственные камни, разные очень, от зеленоватых до белых, розоватых, голубых, оранжевых.

    

HTML

<div class="raised">
<b class="b1">&nbsp;</b><b class="b2">&nbsp;</b><b class="b3">&nbsp;</b><b class="b4">&nbsp;</b>
<div class="boxcontent">
<p>
Текст
</p>
</div>
<b class="b4b">&nbsp;</b><b class="b3b">&nbsp;</b><b class="b2b">&nbsp;</b><b class="b1b">&nbsp;</b>
</div>

CSS

.raised { background:transparent; width:600px;margin:0 auto; }
.raised h1, .raised p { margin:0 10px; }
.raised h1 { font-size:2em; color:#fff; }
.raised p { padding-bottom:0.5em; }
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b { display:block; overflow:hidden; font-size:1px; }
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b { height:1px; }
.raised .b2 { background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee; }
.raised .b3 { background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd; }
.raised .b4 { background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa; }
.raised .b4b { background:#ccc; border-left:1px solid #eee; border-right:1px solid #999; }
.raised .b3b { background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999; }
.raised .b2b { background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999; }
.raised .b1 { margin:0 5px; background:#fff; }
.raised .b2, .raised .b2b { margin:0 3px; border-width:0 2px; }
.raised .b3, .raised .b3b { margin:0 2px; }
.raised .b4, .raised .b4b { height:2px; margin:0 1px; }
.raised .b1b { margin:0 5px; background:#999; }
.raised .boxcontent { display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999; }


Вернуться

Главная страница



Hosted by uCoz