ru af en-us pl be tr

Категория CSS  

Создание овалов и окружностей с помощью свойства bordEr-radIuS CSS3


2012-11-07 12:15:17

 

Создание овалов и окружностей с помощью свойства bordEr-radIuS CSS3

 

 

Если вы хотите, чтобы облачка с текстом имели овальную форму, а не форму прямоуголь-

ников со скругленными углами, для этого нужно определить углы не как дуги окружности, 

а как эллиптические дуги. Эллиптическая дуга, в отличие от дуги окружности, немного 

спрямлена — просто вспомните, как выглядит овал. Для того чтобы задать скругление угла 

по эллиптической дуге, укажите два значения, разделив их косой чертой, примерно так: 

border-radius: 50px/20px. (В Safari 3 и 4 используется нестандартный синтаксис, без косой 

черты, и два значения разделяются простым пробелом.) Предыдущие значения описывают 

сглаженную эллиптическую кривую, вытянутую на 50 пикселов по горизонтали, но только 

на 20 пикселов по вертикали. Для всех углов можно указать разные значения. Подробнее 

об этом рассказывается на веб-сайте css-tricks.com/snippets/css/rounded-corners.

Чтобы создать окружность, сначала определите поле с одинаковыми значениями width 

и height; используйте единицы изменения em, а не пикселы, для того чтобы размер поля 

автоматически подстраивался под увеличивающиеся блоки текста. Затем для каждого угла 

укажите значение свойства border-radius, вполовину меньшее значения width/height. На-

пример, для поля шириной и высотой 10 em используйте значение border-radius, равное 

5 em. Еще больше примеров вы найдете на веб-сайте blog.creativityden.com/the-

hidden-power-of-border-radius-2.

 

 

 

С другой стороны, в CSS3 для создания скругленных углов достаточно всего-навсего 

добавить в один блок div еще одну строку кода, например: border-radius: 10px. 

Никакой дополнительной разметки, никаких изображений, никакого javascript.

Разумеется, с учетом непрерывного совершенствования CSS3 и внедрения в браузе-

рах поддержки новых спецификаций в реальном мире все становится чуть сложнее. 

Однако по сравнению с другими подходами, это совершеннейшие пустяки.

У вас все так же должен быть открыт файл speech-bubble_start.html. Отредактируйте 

правило blockquote, добавив следующий код:

blockquote {

    margin: 0 0 0 112px;

    padding: 10px 15px 5px 15px;

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;

    border-radius: 20px;

    border-top: 1px solid #fff;

    background-color: #A6DADC;

    word-wrap: break-word;

}

 

 

 

Объявление 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 необязательно за-

ранее объявлять рамку поля. 

Если рамки нет, браузер скругля-

ет углы фоновой области.

 

 

 




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

 JavaScript для имитации CSS3
 Распознавание поддержки CSS3 с помощью Modernizr
 Тег html CSS3
 Форма "пулек" CSS
 


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