Блок на странице сайта с закругленными углами

Просмотров: 4 Оставить комментарий

Чтобы на странице сайта сделать вот такой блок с закругленными углами Блок на странице сайта с закругленными угламиможно поступать по-разному.

Традиционный путь – вставить в углы прямоугольного затушеванного блока картинки с изображением четвертей затушеванной (тем же цветом, что и блок) окружности. Не буду объяснять подробно, т.к. это, по сути, просто, но очень громоздко и утомительно.

Однако есть другой вариант – гораздо проще и изящнее.

Вот простейший код скругления углов блока.

Пишем такой код:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″ />
<title>Блок на web-странице с закругленными углами</title>
<style>
div#roundcorners {margin: 0 10%;background: #00ff00}
b.rtop, b.rbottom {display:block;background: #ffffff}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #00ff00}
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>
</head>
<body>
<div id=”roundcorners”>
<b class=”rtop”>
<b class=”r1″></b>
<b class=”r2″></b>
<b class=”r3″></b>
<b class=”r4″></b>
</b>
<p>Наш текст в блоке</p>
<b class=”rbottom”>
<b class=”r4″></b>
<b class=”r3″></b>
<b class=”r2″></b>
<b class=”r1″>
</b>
</b>
</div>
</body>
</html>

Таким образом получим вот такой блок:

Блок на странице сайта с закругленными углами

 

 

Вот так до безобразия просто и красиво! вы сможете создать на странице сайта блок с закругленными углами.

В коде цвета 00ff00 (зеленый) – это цвет фона в блоке, цвет ffffff (белый) – цвет фона страницы.

Разумеется, эти цвета вы поставите другие (по своему усмотрению).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *