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

Графические эффекты без графики • 57

Объявление border-radius: 20px; — это стандартный синтаксис W3C для скруг-
ленных углов. Оно означает, что все четыре угла поля скругляются на 20 пикселов.
Данный синтаксис в настоящее время поддерживается в браузерах Opera, Chrome,
Safari 5 и IE 9. В Firefox и Safari 4 и более ранних версиях используются свойства
-moz-border-radius и -webkit-border-radius
соответственно. Как я уже говорила в главе 1, При использовании свойства
производители браузеров применяют подобные border-radius необязательно за-
уникальные префиксы, пока разработка специ- ранее объявлять рамку поля.
фикации не завершена, на случай, если что-то Если рамки нет, браузер скругля-
кардинально поменяется. Версия того же свой- ет углы фоновой области.
ства, но без префикса (в данном случае border-
radius) всегда должна находиться на последнем
месте; таким образом, если браузеры поддерживают свойство без префикса, то оно
переопределяет предыдущие правила, которые могут наследовать нестандартное
поведение от более ранних версий спецификации.

коротко о СвойСтве bordEr-radIuS
Свойство border-radius входит в модуль Backgrounds and Borders (Фон и границы), который
вы найдете по адресу http://www.w3.org/TR/css3-background. Оно объединяет четыре
свойства, указывающих степень скругления каждого из четырех углов поля, в следую-
щем порядке: border-top-left-radius, border-top-right-radius, border-bottom-right-radius,
border-bottom-left-radius. В браузере Mozilla свойства для отдельных углов поля обладают
нестандартным синтаксисом: -moz-border-radius-topleft и т. п.
Все четыре значения можно перечислить внутри одного свойства border-radius, разделив
их пробелами; можно также использовать одно общее значение для единообразного
скругления всех углов. В Safari 4 и Safari для iOS 3 и более ранних версий добавление не-
скольких значений в одно свойство border-radius не поддерживается; разрешается указать
только одно значение, которое будет применено ко всем углам (табл. 2.2.).
Синтаксис для создания эллиптических дуг в углах поля приводится во врезке «Создание ова-
лов и окружностей с помощью свойства border-radius» чуть выше. На страницах http://www.
owlfolio.org/htmletc/border-radius и http://muddledramblings.com/table-of-css3-border-radius-
compliance/ вы найдете более подробное описание деталей синтаксиса и множество примеров.
Помимо облачков с текстом, с использованием свойства border-radius можно оформлять
следующие элементы:
• кнопки (см. http://blogfreakz.com/button/css3-button-tutorials и http://css-tricks.com/
examples/ButtonMaker);
• заголовки вкладок;
• диалоговые окна;
• круглые эмблемы;
• столбцовые диаграммы (см. http://www.marcofolio.net/css/animated_wicked_css3_3d_
bar_chart.html);
• смайлики (см. http://ryanroberts.co.uk/_dev/experiments/css-border-faces).

www.trk.kg