Блог Сергея Байдачного

Мой блог о технологиях

HTML 5 и Internet Explorer 9: Border Radius

11 комментариев

Начну обзор возможностей для разработчиков в Internet Explorer 9 с border radius. Речь идет о новых стилях, позволяющих предать «закругленную» форму бордюру у любого элемента. Открыв свеженькую книгу по HTML 5, я обнаружил, что border radius в альтернативных браузерах описывается атрибутами, которые полностью отличаются от тех, что описаны на w3c.org (http://www.w3.org/TR/css3-background/#the-border-radius). Поэтому, не долго думая, я открыл Internet Explorer 9 и попробовал использовать текущие рекомендации. Вот первый пример, который мне удалось написать:

<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 9 beta</title>
<style type="text/css">
a
{
border-radius: 10em;
border:3px red solid;
}
}
</style>
</head>
<body>
<a href="
http://ietestdrive.com">Internet Explorer 9 beta</a>
</body>
</html>

Работает! На экране отобразилось то, что я и ожидал:

image

Если немного модифицировать код:

a
{
border-radius: 10em / 20em;
border:3px red solid;
}

То наш бордюр немного «сплющивается»:

image

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

С таким же успехом мы можем задать закругление для каждого из углов отдельно. Для этого перечисляем все значения через пробел. Отчет начинается с верхнего левого угла. Если Вы указали три или меньше значений, то недостающие значения заполняются на основе заданных (слева-направо). Ниже пример, демонстрирующий создание закладок:

<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 9 beta</title>
<style type="text/css">
a
    {
    border-radius: 10em 10em 0em 0em/ 15em 15em 0em 0em;
    border:3px red solid;
    }
}
</style>
</head>

<body>
    <a href="
http://ietestdrive.com">&nbsp;&nbsp;Internet Explorer 9 beta&nbsp;&nbsp;</a>
    <a href="
http://www.microsoft.com">&nbsp;&nbsp;Microsoft&nbsp;&nbsp;</a>
</body>
</html>

image

Тут нули указывать обязательно, либо вместо них будут подставлены 10 и 15 соответственно.

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

border-top-left-radius:     10em 15em;
border-top-right-radius:    10em 15em;
border-bottom-right-radius: 10em 15em;
border-bottom-left-radius:  10em 15em;

Вот такой border-radius.

Реклама

Written by Sergiy Baydachnyy

14.09.2010 в 18:17

Опубликовано в Internet Explorer 9

Tagged with

комментариев 11

Subscribe to comments with RSS.

    • Задайте для блока со скругленными углами фоновый цвет. недостестировали : )

      kos

      21.06.2011 at 17:04

  1. Ну где же вы это видели? Скриншоты в Опере делали? Потому, что документированное свойство border-radius работет в чистом виде только в Опере. Даже Firefox и браузеры на движке Webkit отображают только специально для них модифицированное свойство. Ничерта IE 9 не отображает радиусы.

    DENvisioN

    06.04.2011 at 07:17

  2. Border Radius не работает в IE 9, не надо сказки рассказывать!

    Юрий

    06.09.2011 at 14:38

    • Конечно, не работает. Все картинки я рисовал в Paint:)

      Sergiy Baydachnyy

      06.09.2011 at 16:58

    • работает. после нажатия F12 на любой страничке, найдите режимы совместимости и включите режим «IE9»

      Аноним

      30.01.2012 at 07:53

  3. […] время назад писал пост о возможности работы с border-radius. Как ни странно, Internet Explorer 9 единственный браузер, […]

  4. Я бы еще добавил, что префиксы для border-radius в других браузерах — относятся к старым версиям.
    В FF6 и в Хроме 15 Dev — нижняя запись работает отлично как и должна.
    border-radius:5px;

    phoenixx

    07.09.2011 at 17:28

  5. ддаувму

    Аноним

    05.06.2012 at 12:15

  6. радиус в 9 работает, если указан бордер. Если рамка не указана, края фона закругляться не будут как в мозиле допустим

    Аноним

    05.06.2012 at 12:16

  7. http://step-web.ru/online-service/css-border-radius.php генератор с поддержкой старых версий IE

    Александр

    16.07.2014 at 11:47


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: