HTML 5 и Internet Explorer 9: Border Radius
Начну обзор возможностей для разработчиков в 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>
Работает! На экране отобразилось то, что я и ожидал:
Если немного модифицировать код:
a
{
border-radius: 10em / 20em;
border:3px red solid;
}
То наш бордюр немного «сплющивается»:
Это происходит от того, что 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"> Internet Explorer 9 beta </a>
<a href="http://www.microsoft.com"> Microsoft </a>
</body>
</html>
Тут нули указывать обязательно, либо вместо них будут подставлены 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.
[…] HTML 5 и Internet Explorer 9: Border Radius […]
Internet Explorer 9 Beta: новые возможности для разработчиков - Alex Krakovetskiy blog - Microsoft User Group Винница
15.09.2010 at 21:39
Задайте для блока со скругленными углами фоновый цвет. недостестировали : )
kos
21.06.2011 at 17:04
Ну где же вы это видели? Скриншоты в Опере делали? Потому, что документированное свойство border-radius работет в чистом виде только в Опере. Даже Firefox и браузеры на движке Webkit отображают только специально для них модифицированное свойство. Ничерта IE 9 не отображает радиусы.
DENvisioN
06.04.2011 at 07:17
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
[…] время назад писал пост о возможности работы с border-radius. Как ни странно, Internet Explorer 9 единственный браузер, […]
«Почему не работает гребаный border-radius или Накипело. « « Блог Сергея Байдачного
06.09.2011 at 17:50
Я бы еще добавил, что префиксы для border-radius в других браузерах — относятся к старым версиям.
В FF6 и в Хроме 15 Dev — нижняя запись работает отлично как и должна.
border-radius:5px;
phoenixx
07.09.2011 at 17:28
ддаувму
Аноним
05.06.2012 at 12:15
радиус в 9 работает, если указан бордер. Если рамка не указана, края фона закругляться не будут как в мозиле допустим
Аноним
05.06.2012 at 12:16
http://step-web.ru/online-service/css-border-radius.php генератор с поддержкой старых версий IE
Александр
16.07.2014 at 11:47