Серверное время 2017-09-21 20:45:24
Приветствую вас, Гость
Понравился сайт - нажми CTRL+D и добавь в закладки..
Свойства CSS
CSS по категориям
Статистика
Яндекс.Метрика
Реклама
Реклама

-webkit-border-radius

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
10.5
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Не поддерживается
Не поддерживается
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Не поддерживается
Не поддерживается
Не поддерживается
Не поддерживается
Частичная поддержка
Частичная поддержка
Полная поддержка
Не поддерживается
Не поддерживается
Не поддерживается
Не поддерживается
Краткая информация
CSS -
Значение по умолчанию 0
Наследуется Нет
Процентная запись Неприменима
Применяется Ко всем элементам, за исключением таблиц с border-collapse: collapse
Описание
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Синтаксис
-webkit-border-radius: <радиус>{1,4} [ / <радиус>{1,4}]
Аргументы
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате.
Число значений Результат
1 Радиус указывается для всех четырех уголков.
2 Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3 Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4 По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.
Табл. 1. Зависимость от числа значений
В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>-webkit-border-radius</title>
<style type="text/css">
.radius {
background: #fc0; /* Цвет фона */
padding: 15px; /* Поля вокруг текста */
margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
 <div style="-webkit-border-radius: 50px 0 0 50px;" class="radius">
-webkit-border-radius: 50px 0 0 50px;
 </div>
 <div style="-webkit-border-radius: 40px 10px" class="radius">
-webkit-border-radius: 40px 10px;
 </div>
 <div style="-webkit-border-radius: 10em/1em;" class="radius">
-webkit-border-radius: 13em/3em;
 </div>
 <div style="-webkit-border-radius: 13em 0.5em/1em 0.5em; border: 2px solid black;" class="radius">
-webkit-border-radius: 13em 0.5em/1em 0.5em; border: 2px solid black;
 </div>
 <div style="-webkit-border-radius: 8px; border: 1px solid black;" class="radius">
-webkit-border-radius: 8px; border: 1px solid black;
 </div>
</body>
</html>
Демонстрация примера
aaa
Примечание
-webkit-border-radius нестандартное свойство и поддерживается только браузером Chrome и Safari начиная с версии 3.0.
-webkit-border-radius не применяется к таблицам, у которых свойство border-collapse задано как collapse.
Safari до версии 4.0 включительно не понимает синтаксис со слэшем, эллиптическая рамка рисуются для всех четырех углов, если указано два значения через пробел.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (0)
Имя
Email
Осталось 65535 символов
© 2006-2012, Home-test.biz