Page 191 - Сила CSS3 Освой новейший стандарт

Динамическая подсветка разделов страницы • 191

float: left;
padding-left: 5px;
}

Теперь к каждому числу добавим круглый фон,
применив для этого свойство border-radius. Бу- IE 9 поддерживает свойство bor-
дем использовать тот же цвет, что и для ссылок, der-radius, но не с генерируемым
только сделаем его полупрозрачным: содержимым (по крайней мере,
на момент написания этой главы).
#toc li:before { Поэтому в IE 9 у чисел в оглавле-
content: counter(list);
float: left; нии страницы будет квадратный,
width: 1.6em; а не круглый фон.
height: 1.6em;
-moz-border-radius: .8em;
-webkit-border-radius: .8em;
border-radius: .8em;
background: #87B3CE;
background: hsla(203,78%,36%,.5);
}

В главе 2 во врезке «Создание овалов и окружностей с помощью свойства border-
radius» я уже рассказывала, как превратить прямоугольник в круг: нужно выбрать
одинаковые значения ширины и высоты (мы используем 1.6em), а затем свойству
border-radius присвоить вполовину меньшее значение (.8em).
На рис. 5.12 видно, что под числами действительно появились круглые фоновые
рисунки, но текст определенно требует более точного выравнивания. Добавьте
к правилу #toc li:before следующие новые объявления:
color: #fff;
font-family: Arial, Helvetica, "Helvetica Neue",
sans-serif;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 0 hsla(0,0%,0%,.6);
text-align: center;

Рис. 5.12. Свойство border-radius помогло нам создать круглые фоновые рисунки
для маркеров списка

Теперь числа и вправду выглядят так, словно нарисованы поверх голубых кружков
(рис. 5.13). Мы создали впечатление наличия рисованных значков, не добавляя
никакие изображения и не редактируя код HTML.

www.trk.kg