ru af en-us pl be tr

Категория CSS  

bordEr-radIuS CSS3


2012-11-07 12:18:05

 

 bordEr-radIuS CSS3

 

 

Свойство border-radius входит в модуль Backgrounds and Borders (Фон и границы), который 

вы найдете по адресу 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» чуть выше. На страницах

owlfolio.org/htmletc/border-radius и uddledramblings.com/table-of-css3-border-radius-

compliance/ вы найдете более подробное описание деталей синтаксиса и множество примеров.

Помимо облачков с текстом, с использованием свойства border-radius можно оформлять 

следующие элементы:

кнопки (см. ogfreakz.com/button/css3-button-tutorials и ss-tricks.com/

examples/ButtonMaker);

заголовки вкладок;

диалоговые окна;

круглые эмблемы;

столбцовые диаграммы (см. marcofolio.net/css/animated_wicked_css3_3d_

bar_chart.html);

смайлики (см.yanroberts.co.uk/_dev/experiments/css-border-faces).

 

 

Поддержка свойства border-radius в браузерах

 

Поддержка свойства border-radius в браузерах CSS3

 

 

Три дополнительные строчки кода создают эффект скругленных углов во всех брау-

зерах, за исключением IE 8 и более ранних версий (рис. 2.4). Эти версии IE попросту 

 

игнорируют перечисленные свойства и сохра-

няют углы полей прямыми, не искажая страни-

цу. Это отличный пример прогрессивного усо-

вершенствования, о котором я подробно рас-

сказала в первой главе. Поскольку сейчас речь 

идет об исключительно декоративных эффектах, 

пользователи IE нисколько не страдают от их 

отсутствия. Если вы не согласны с моим мнени-

ем, читайте дальше.

 

 

Свойство border-radius применено правильно

 

Свойство border-radius применено правильно

 




Похожие статьи

 Проблемы с префиксами CSS3
 Фильтрация IE CSS3
 Обходные пути для IE создать эффект скругленных углов CSS3
 Распознавание поддержки CSS3 с помощью Modernizr
 


Сайт является частным собранием материалов и представляет собой любительский информационно-образовательный ресурс. Вся информация получена из открытых источников. Администрация не претендует на авторство использованных материалов. Все права принадлежат их правообладателям