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

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 CSS3+
Значение по умолчанию 0
Наследуется Нет
Процентная запись Да, относительно ширины блока
Применяется Ко всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификацию открыть в новой вкладке
Описание
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Синтаксис
border-radius: <радиус>{1,4} [ / <радиус>{1,4}]
Аргументы
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.
Число значений Результат
1 Радиус указывается для всех четырех уголков.
2 Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3 Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4 По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.
Табл. 1. Зависимость от числа значений
В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 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>border-radius</title>
<style type="text/css">
.radius {
background: #f0f0f0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 15px; /* Поля вокруг текста */
margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
 <div style="border-radius: 50px 0 0 50px;" class="radius">
border-radius: 50px 0 0 50px;
 </div>
 <div style="border-radius: 40px 10px" class="radius">
border-radius: 40px 10px;
 </div>
 <div style="border-radius: 10em/1em;" class="radius">
border-radius: 13em/3em;
 </div>
 <div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius">
border-radius: 13em 0.5em/1em 0.5em;
 </div>
 <div style="border-radius: 8px;" class="radius">
border-radius: 8px;
 </div>
</body>
</html>
Демонстрация примера
aaa
Примечание
Firefox использует нестандартное свойство -moz-border-radius.
Safari использует нестандартное свойство -webkit-border-radius, браузер Chrome также его понимает.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (0)
Имя
Email
Осталось 65535 символов
© 2006-2012, Home-test.biz