Хоча зображення досить успішно застосовуються для створення заокруглених куточків в рамках, стилями часом робити це зручніше. По-перше, через стилі можна легко змінити колір рамки без редагування картинок. І, по-друге, рамки без малюнків завжди відображаються в браузерах однаково, незалежно від того, виключений показ картинок чи ні.
Будь-заокруглення утворюється за рахунок зміщення певних пікселів в кутку прямокутної рамки. Якщо збільшити фрагмент лівого верхнього куточка малюнка рамки товщиною один піксель і радіусом заокруглення три пікселя (рис. 1), то це зміщення стає добре помітно.
Рис. 1. Збільшений фрагмент куточка
Для створення подібної рамки потрібно три шару висотою 1-2 пікселя, який накладаються один на одного. Опишемо їх характеристики дивлячись на рис. 1.
- Шар 1 — висота один піксель, відступ чотири пікселя.
- Шар 2 — ширина кордону два пікселя, висота один піксель, відступ два пікселя.
- Шар 3 — ширина кордону один піксель, висота два пікселя, відступ один піксель.
Висота шару задається властивістю height, межа ліворуч через border-left, праворуч — border-right. Щоб забезпечити зміщення цих шарів, до їх стилям слід додати властивість margin зі значенням, рівним величині зсуву, як показано в прикладі 1.
Приклад 1. Створення округленої рамки
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заокруглена рамка</title>
<style type="text/css">
.d1, .d2, .d3 {
display: block; /* Блоковий елемент */
font-size: 0; /* Розмір шрифту для IE6-7 */
overflow: hidden; /* Для браузера IE6 */
height: 1px; /* Висота блоку в один піксел */
}
.d2, .d3, .dialog-round div {
border-left: 1px solid #666; /* Межа ліворуч */
border-right: 1px solid #666; /* Межа праворуч */
}
.d1 { margin: 0 4px; background: #666; }
.d2 { margin: 0 2px; border-width: 2px; }
.d3 { margin: 0 1px; height: 2px; }
.dialog-round div {
padding: 5px 10px; /* Відступи по горизонталі і вертикалі */
}
</style>
</head>
<body>
<div class="dialog-round">
<span class="d1"></span><span class="d2"></span><span class="d3"></span>
<div>
На вулицях і пустирях хлопчики запускають повітряних зміїв, а дівчатка грають дерев'яними ракетками з кольоровими малюнками в хане.
</div>
<span class="d3"></span><span class="d2"></span><span class="d1"></span>
</div>
</body>
</html>
Три шари створюють заокруглення додаються з першого по третій на початку блоку і з третього на перший — у його кінці. Межа ліворуч і праворуч також додається до шару з текстом. Результат приклад показаний на рис. 2.
Рис. 2. Рамка із закругленими куточками
Зручність наведеного методу створення рамки полягає в простоті зміни кольору рамки та фону блоку. Після невеликої модифікації прикладу 1 знадобиться задати колір у двох місцях. У прикладі 2 використовується білий колір рамки (#fff), який добре помітний на темному тлі веб-сторінки.
Приклад 2. Кольоровий блок
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заокруглена рамка</title>
<style type="text/css">
BODY {
background: #7e7166; /* Колір фону веб-сторінки */
}
.d1, .d2, .d3 {
display: block; font-size: 0; overflow: hidden; height: 1px;
}
.d2, .d3, .dialog-round div {
border: 1px solid #fff; /* Параметри рамки */
border-top: none; border-bottom: none; /* Прибираємо кордон зверху і знизу */
background: #fc0; /* Колір фону блоку */
}
.d1 { margin: 0 4px; background: #fff; }
.d2 { margin: 0 2px; border-width: 2px; }
.d3 { margin: 0 1px; height: 2px; }
.dialog-round div { padding: 10px 5px; }
</style>
</head>
<body>
<div class="dialog-round">
<span class="d1"></span><span class="d2"></span><span class="d3"></span>
<div>
На вулицях і пустирях хлопчики запускають повітряних зміїв, а дівчатка грають дерев'яними ракетками з кольоровими малюнками в хане.
</div>
<span class="d3"></span><span class="d2"></span><span class="d1"></span>
</div>
</body>
</html>
Результат цього прикладу показано на рис. 3.
Рис. 3. Рамка із закругленими куточками на темному фоні
Наведемо також стиль для створення рамки товщиною два пікселя, який може знадобитися в тих випадках, коли товщини в один піксель буває недостатньо (приклад 3). При цьому HTML-код залишиться колишнім.
Приклад 3. Стиль для рамки товщиною два пікселя
<style type="text/css">
.d1, .d2, .d3 {
display: block; font-size: 0; overflow: hidden; height: 1px;
}
.d2, .d3, .dialog-round div {
border: 2px solid #666; /* Параметри рамки */
border-top: none; border-bottom: none; /* Прибираємо кордон зверху і знизу */
}
.d1 { margin: 0 3px; background: #666; }
.d2 { margin: 0 1px; border-width: 2px; background: #666; }
.d3 { margin: 0 1px; height: 1px; }
.dialog-round div { padding: 10px 5px; }
</style>