Добавление скругленных углов с помощью CSS3

Используя каскадные таблицы стилей уровня 3 (CSS3) для скругления углов элементов макета, можно улучшить внешний вид вашего веб-сайта. В этом разделе показано несколько основных способов повышения привлекательности макета веб-сайта с помощью новой встроенной поддержки скругленных углов в Windows Internet Explorer 9.Раздел содержит следующие подразделы:

Начальная точка

Для задач, описанных в данном разделе, начнем с очень простой веб-страницы. Эта страница описывает вымышленную кофейную компанию. Здесь применяется код HTML, каскадные таблицы стилей (CSS) и несколько изображений. Вы можете просмотреть и скачать HTML и CSS. На следующем снимке экрана показана исходная веб-страница.

Снимок экрана исходной страницы.

Важно  

Когда вы создаете собственную веб-страницу с намерением использовать преимущества поддержки новых веб-стандартов, имеющейся в Internet Explorer 9, не забудьте поместить в начале страницы следующую директиву !DOCTYPE:


<!DOCTYPE html>

Это гарантирует, что Internet Explorer 9 отобразит вашу страницу в "стандартном режиме Internet Explorer 9" с использованием поддержки последних стандартов. Подробнее см. в разделе Определение совместимости документов.

В этом макете, как и во многих других, поля помогают визуально отделить содержимое, а также привлечь внимание. Тем не менее этот макет остается достаточно плоским. С помощью Internet Explorer 9 и CSS3 можно скруглить углы этих полей.

Скругленные углы в Internet Explorer 9 с таблицами CSS3 отображаются очень четко, и можно использовать множество комбинаций. В этом разделе мы будем рассматривать три области примера макета, выделенные в следующем изображении:

  • Кромки эскизов кофейных зерен (определенных с помощью селектора класса product_thumb)
  • Боковая панель вдоль правого края страницы (определенная с помощью селектора идентификатора sidebar)
  • Желтые полосы заголовков в верхней и нижней частях страницы (определенные с помощью селекторов идентификатора header и footer)
В этом разделе показано, как добавить скругленные углы для выделенных областей

Равное скругление всех углов

Начнем с эскизов кофейных зерен и слегка сгладим их углы. Чтобы одинаково скруглить все углы рамки, воспользуйтесь свойством border-radius с одним значением. (Этим значением может быть либо значение длины, либо процентное отношение. Процент вычисляется от общей высоты или ширины. Во всех примерах этого раздела используются значения длины.) Чтобы использовать это свойство в его простейшей форме, задайте радиус круга, определяющий форму каждого угла рамки. В следующем изображении к прямоугольнику применяется свойство border-radius со значением 20 пикселей. Обратите внимание, как круги определяют кривую углов.

Демонстрация свойства border-radius для прямоугольника

Сейчас код CSS, определяющей внешний вид эскизов, представлен следующим селектором класса:


.product_thumb {
  clear: left;
  height: 80px;
  width: 80px;
  margin-right: 10px;
  padding: 5px;
  float: left;
  border-width: 1px;
  border-color: #7f7f7f;
  border-style: dashed;
}

Благодаря этому все эскизы в Internet Explorer 9 отображаются следующим образом:Изображение эскиза с исходным стилем

Добавим свойство border-radius и зададим для него значение 5 пикселей. Для этого добавим в селектор класса product_thumb следующую строку:


  border-radius: 5px;

После добавления этой строки в селектор все границы кофейных зерен будут выглядеть, как показано ниже:

Изображение эскиза со свойством border-radius, равным 5 пикселей.

Скругление нескольких углов по отдельности

Теперь обратимся к боковой панели. Сейчас код CSS, определяющий внешний вид боковой панели, представлен следующим селектором идентификатора:


#sidebar {
  font-size: 12px;
  padding: 15px;
  margin: 20px 0px 10px 75%;
  border-style: dashed;
  border-color: #996600;
  border-width: 5px;
}

Благодаря этому боковая панель в Internet Explorer 9 отображается следующим образом:

Боковая панель с исходным стилем

Закруглить верхний левый угол, используя для этого более широкую кривую, чем для остальных углов, можно с помощью одного из двух методов. Один из них заключается в использовании других свойств border-radius.

Имеются следующие свойства border-radius:

Некоторые из этих свойств можно использовать, чтобы заполнить просвет в верхнем левом углу боковой панели, а также добавить несколько интересных кривых в нижнюю часть боковой панели.

Добавим следующие строки в селектор идентификатора sidebar:


  border-top-left-radius: 10em;
  border-bottom-right-radius: 5em;
  border-bottom-left-radius: 2em;

После добавления этих строк в селектор боковая панель будет выглядеть, как показано ниже:

Боковая панель со значениями свойства border-radius 10 em для верхнего левого угла, 5 em для нижнего правого угла и 2 em для нижнего левого угла

Вы также можете отдельно скруглить углы боковой панели, используя свойство border-radius как собирательное свойство. Если вы введете более одного значения для свойства border-radius, кривая для каждого угла будет меняться в соответствии с этими значениями в том порядке, в каком они указаны. Например, тот же самый результат в примере с боковой панелью может быть достигнут путем добавления в селектор следующей строки:


  border-radius: 10em 0 5em 2em;

Для свойства border-radius используется следующий порядок значений:


  border-radius: ul ur lr ll;

Здесь ul представляет верхний левый угол, ur — верхний правый угол, lr — нижний правый угол и ll — нижний левый угол. Нулевая величина длины для любого из этих значений означает отсутствие скругления — угол остается прямым. Этот порядок значений иллюстрируется следующим изображением:

Схема, иллюстрирующая свойство border-radius с несколькими значениями

Чтобы получить другие результаты, мы можем также использовать только два или три значения для свойства border-radius. Предлагаем попробовать эти варианты самостоятельно. Подробное объяснение поведения этого свойства см. на справочной странице свойства border-radius на MSDN.

Скругление углов с помощью эллипсов

До сих пор использовались только скругленные углы, определенные окружностями. Свойства border-radius могут также задавать углы, определенные эллипсами, с разными радиусами x (по горизонтали) и y (по вертикали).

Скруглим два верхних угла рамки, определенной селектором идентификатора header, а также два нижних угла рамки, определенной селектором идентификатора footer, используя два эллипса.

Эллипсы нужно использовать, чтобы определить верхний левый и верхний правый углы верхнего колонтитула, поэтому добавим в селектор header следующие две строки:


  border-top-left-radius: 50px 25px;
  border-top-right-radius: 50px 25px;

Чтобы использовать эллипсы для определения нижнего левого и нижнего правого углов нижнего колонтитула, добавим в селектор footer следующие две строки:


  border-bottom-left-radius: 15px 30px;
  border-bottom-right-radius: 15px 30px;

При использовании отдельных свойств border-radius первое значение соответствует горизонтальному радиусу эллипса, определяющего угол, а второе значение соответствует вертикальному радиусу. Результат показан на следующем рисунке:

При использовании свойств border-radius первое значение соответствует горизонтальному радиусу эллипса, определяющего угол, а второе значение соответствует вертикальному радиусу.

Вы можете также использовать свойство border-radius как собирательное свойство, чтобы задать эллиптическое скругление углов одной строкой. Для свойства border-radius используется следующий порядок значений:

border-radius: ulx urx lrx llx / uly ury lry lly;

Значения перед косой чертой ("/") определяют горизонтальные оси (или x-оси) каждого угла, а значения после косой черты — вертикальные оси (или y-оси). Здесь ulx представляет горизонтальную ось верхнего левого угла, urx представляет горизонтальную ось верхнего правого угла и т. д. Аналогично uly представляет вертикальную ось верхнего левого угла, ury представляет вертикальную ось верхнего правого угла и т. д. Этот порядок значений иллюстрируется следующим изображением.

Схема, показывающая использование свойства border-radius как составного свойства и соответствующих размеров

Следующая строка, добавленная в селектор идентификатора header, приводит к тем же результатам, что и ранее:


border-radius: 50px 50px 0 0 / 25px 25px 0 0;

Подобным образом следующая строка, добавленная в селектор идентификатора footer, приводит к тем же результатам, что и до того:


border-radius: 0 0 15px 15px / 0 0 30px 30px;

Скругление углов с помощью других браузеров

Поскольку спецификация CSS3 является новым стандартом, на данный момент не все браузеры одинаково поддерживают свойства border-radius. Некоторые старые версии браузеров поддерживают свойства border-radius, но только с соответствующим (зависящим от поставщика) префиксом в начале. (Дополнительные сведения о префиксах поставщиков см. в разделе "Расширения поставщиков для Microsoft CSS" в блоге группы разработчиков Windows Internet Explorer.) В одних браузерах может отличаться поддержка нотации косой черты ("/"), описанная ранее, а в некоторых других может быть ограничена поддержка эллиптических (в отличие от круговых) границ.

Чтобы обеспечить обратную совместимость со старой версией браузера, следует просмотреть веб-сайт соответствующего производителя браузера. В зависимости от браузера и его версии вам, возможно, потребуется просто повторить все свойства border-radius с соответствующим префиксом поставщика. Например, следующий селектор должен приводить к тем же результатам скругления углов в Internet Explorer 9, что и в текущих и старых версиях Mozilla Firefox, Apple Safari, Google Chrome и Opera:


.my_selector {
  ...
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

Однако, чем более сложны скругленные углы, тем меньше вероятность того, что синтаксис border-radius будет переносимым. В этом случае вам нужно проконсультироваться на веб-сайте разработчика браузера:

Результат

Новый вид страницы Fourth Coffee после всех изменений, описанных в данном разделе (и с разными для разных производителей именами свойств, предназначенными для других браузеров), представлен здесь: HTML для обновленной страницы; CSS для обновленной страницы.

Скругление углов в старых версиях Internet Explorer

Поддержка свойств border-radius появилась в Internet Explorer 9. Для добавления скругленных углов в макет так, чтобы их могли видеть пользователи Windows Internet Explorer 8 и более старых версий, можно воспользоваться преимуществом одного из множества альтернативных решений, доступных в Интернете. Кроме решений для скругления отдельных углов, существуют также сайты с часто обновляемыми списками решений для скругленных углов, совместимых с разными версиями Internet Explorer и другими браузерами.

Ниже перечислены некоторые из наших самых популярных сайтов с объединенными решениями для скругленных углов. (Включение ссылки в список не означает одобрения соответствующего сайта со стороны корпорации Майкрософт.)

Связанные разделы

Фотоальбом "Изображения Contoso"
Создание стилизованных кнопок с помощью CSS3
Добавление теней с помощью CSS3
CSS3

 

 

Показ:
© 2014 Microsoft