Для створення рамки навколо блоку використовується стильове властивість border, значення якого задається товщина, стиль і колір лінії. Якщо поверх такої лінії накласти графічні куточки, то ми вб'ємо двох зайців — отримаємо потрібні заокруглення та збережемо кордон, яку можна побачити навіть при відключенні картинок.
Спочатку малюємо рамку в графічному редакторі (рис. 1). У нашому випадку вона має товщину два пікселя і сірий колір (#808080).
Рис. 1. Рамка на прозорому фоні
Всередині рамка обов'язково повинна бути прозорою, тоді можна буде ставити блоку бажаний колір, а фон під куточками повинен збігатися з кольором фону. Як показано на рис. 1, він білий.
Оскільки на малюнку нас цікавлять тільки куточки, то для сайту зображення слід змінити — вирізати куточки і розмістити їх поруч по горизонталі або вертикалі (рис. 2).
Рис. 2. Зображення для публікації
Збільшений малюнок з куточками на прозорому тлі представлений на рис. 3. Зверху вниз розташовуються куточки: верхній лівий, правий верхній, нижній лівий і правий нижній.
Рис. 3. Збільшене зображення куточків
Після того, як малюнок підготовлений, пора переходити до коду. Для створення куточків нам потрібно чотири елемента, їх якості можна використовувати теги <em>, <b>, <strong>, <span> та інші, для зручності вкладаючи їх одну в іншу. Для верхніх куточків заведемо клас з ім'ям bt, а для нижніх — клас bb (приклад 1).
Приклад 1. Код для створення блоку
<div class="color_block"> <em class="bt"><b> </b></em> <div class="block_content"> Вміст </div> <em class="bb"><b> </b></em> </div>
В стилях до блоку додаємо рамку через властивість border, а висновок куточків робимо через універсальне властивість background. Рамка відображається навколо блоку, тому фоновий малюнок виявиться всередині кордону. Так що доведеться зрушувати фон на товщину лінії через властивості top і left, попередньо встановивши відносне позиціювання (приклад 2).
Приклад 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">
.color_block {
border: 2px #808080 solid; /* Параметри рамки */
background: #e3ffec; /* Колір фону */
}
em.bt, em.bt b, em.bb, em.bb b {
display: block; /* Блоковий елемент */
height: 10px; /* Висота куточка */
font-size: 0; /* Розмір шрифту */
background: url(images/corners.png) no-repeat; /* Шлях до файлу з куточками */
position: relative; /* Відносне позиціонування */
}
em.bt {
top: -2px; /* Зрушуємо лівий верхній куток вгору */
left: -2px; /* Зрушуємо вліво */
}
em.bt b {
background-position: 100% -10px; /* Малюнок зрушується до наступного куточку */
left: 4px; /* Зрушуємо вправо */
}
em.bb { background-position: 0 -20px; top: 2px; left: -2px; }
em.bb b { background-position: 100% -30px; left: 4px; }
.color_block .block_content {
padding: 0 7px; /* Поля навколо тексту */
}
</style>
</head>
<body>
<div class="color_block">
<em class="bt"><b> </b></em>
<div class="block_content">
Щоб виготовити опудало для гірського поля, роблять фігуру людини, який тримає в руках лук і стріли. Птахи і звірі бачать його і тікають. І хоча у лякала немає ніяких намірів, олень не підійде до нього близько. Так лякало виконує своє призначення, і тому говорять, що воно стоїть у гірському полі не марно.
</div>
<em class="bb"><b> </b></em>
</div>
</body>
</html>
Результат цього прикладу показано на рис. 4.
Рис. 4. Закруглені куточки у блоку
Зверніть увагу на наступні моменти. Сам малюнок з куточками у вигляді фону виводиться тільки один раз і далі для певних елементів змінює свою позицію через властивість background-position. Так як висота блоку обмежена значенням height, то побачити весь малюнок цілком не можна, тому ми бачимо потрібний нам фрагмент. Для вкладених тегів <b> зрушувати малюнок доводиться з урахуванням зміщення його батька, тому в якості значення left виступає подвоєна товщина кордону.