Уроки web-программирования. CSS: Закругление углов. |
|
|
Автор megabax
|
15.06.2010 г. |
Урок 13. Управление шрифтами в CSS
New Page 1
Уроки web-программирования. CSS:
Закругление углов.
Сегодня мы
при помощи CSS оформим текст в рамке с
закругленным углами. Вот так:

Для начала
создадим HTML файл:
<html>
<head>
<title>Пример CSS файла. Закругление углов</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div class="round_div">
<em class="tl"><b>•</b></em>
<em class="bl"><b>•</b></em>
<em class="tr"><b>•</b></em>
<em class="br"><b>•</b></em>
<p>Пример использования CSS.<br />
Урок CSS. Закругление углов</p>
</div>
</body>
</html> |
В нем у нас имеется тэг div внутри которого мы и
разместили текст. Тэг • выводит специальный знак в виде кругляшка. Он
то и создаст закругленные края.
Теперь перейдем к файлу styles.css:
.round_div {
position:relative;
width:220px;
background:#0072B9;
color:#FFFFFF;
}
.tl, .bl, .tr, .br {
position:absolute;
width:20px;
height:20px;
color:#0072B9;
background:#FFFFFF;
overflow:hidden;
z-index:1;
}
.tl {top:0; left:0;}
.bl {bottom:0; left:0;}
.tr {top:0; right:0;}
.br {bottom:0; right:0;}
.tl b {left:-8px;}
.tr b {left:-25px;}
.bl b {left:-8px; top:-17px;}
.br b {left:-25px; top:-17px;}
.round_div em b {
position:absolute;
font:150px Arial;
color:#0072B9;
line-height:40px;
font-weight:normal;
}
.round_div p {
position:relative;
z-index:10;
padding:5px 10px;
}
|
Немного комментариев к коду. Сначала мы задаем размеры и цвет блока round_div.
Затем задаем размеры и цвет для "кругляшков":
.tl, .bl, .tr, .br {
position:absolute;
width:20px;
height:20px;
color:#0072B9;
background:#FFFFFF;
overflow:hidden;
z-index:1;
} |
Обратите внимание, что здесь цвет фона и текста поменян места относительно
блока round_div.
Еще мы используем свойство overflow, оно задает режим отображение текста,
который не входит. Вот возможные значения этого свойства6
- Visible. Отображается все содержание
элемента, даже за пределами установленной высоты и ширины.
- Hidden.
Отображается только область внутри элемента, остальное будет скрыто.
- Scroll. Всегда
добавляются полосы прокрутки.
- Auto. Полосы
прокрутки добавляются только при необходимости.
- Inherit.
Наследует значение родителя.
Далее мы задаем координаты расположения углов:
.tl {top:0; left:0;}
.bl {bottom:0; left:0;}
.tr {top:0; right:0;}
.br {bottom:0; right:0;}.tl b {left:-8px;}
.tr b {left:-25px;}
.bl b {left:-8px; top:-17px;}
.br b {left:-25px; top:-17px;} |
и, наконец, стиль самого текста:
.round_div em b {
position:absolute;
font:150px Arial;
color:#0072B9;
line-height:40px;
font-weight:normal;
}
.round_div p {
position:relative;
z-index:10;
padding:5px 10px;
} |
|
Последнее обновление ( 15.06.2010 г. )
|