AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Скругление углов

Обратите внимание на окантовку этого блока. У него закругленные углы. Это сделанно без использования картинок. Только за счет использования CSS3.

Подробный пример код данного примера отображен ниже.

Но перед этим немного рекламы, которая меня "кормит".

Исходный код этого примера:

<style type="text/css">
body{padding: 20px;background-color: #FFF;
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA; width:600px;}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>

<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Скругление углов</h1>
<p>Обратите внимание на окантовку этого блока. У него закругленные углы.
Это сделанно без использования картинок. Только за счет использования CSS3.</p>
<p>Подробный пример код данного примера отображен ниже.</p>
<p>Но перед этим немного рекламы, которая меня "кормит".</p>

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>


.

© Copyright 2008-2016 by KDG