border-radius | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Главная » Справочник CSS3 » Свойства углов


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


border-radius | Свойство CSS

Свойство border-radius закругляет 4 угла элемента.




Свойство border-radius закругляет все четыре угла элемента.Могут быть использованы положительные значения чисел,а так же процентные соотношения записанные через пробел.Так же можно задать значения для угла с элипсом,для этого значения указываются разделяясь слэшем ( / ),где первое значение соответствует оси x ( горизонтали ),а второе оси y ( вертикали ).Существует возможность указания от одного до восьми значений,имеется в виду запись для круглых углов до 4 значений,для эллипсных до 8.
Описание вариантов с числом равным 10px
1.border-radius:10px; - закругляем все 4 угла
2.border-radius:10px/10px; - эллипсуем все 4 угла
3.border-radius:10px 10px; - закругляем первым значением верхний левый и нижний правый угол,вторым верхний правый и нижний левый углы ( по диагонали )
4.border-radius:10px/10px 10px/10px; - эллипсуем первым значением верхний левый и нижний правый угол,вторым верхний правый и нижний левый углы ( по диагонали )
5.border-radius:10px 10px 10px; - закругляем первым значением верхний левый угол,вторым одновременно верхний правый и нижний левый углы ( по диагонали ),третьим нижний правый угол
6.border-radius:10px/10px 10px/10px 10px/10px; - эллипсуем первым значением верхний левый угол,вторым одновременно верхний правый и нижний левый углы ( по диагонали ),третьим нижний правый угол
7.border-radius:10px 10px 10px 10px; - закругляем первым значением верхний левый угол,вторым верхний правый,третьим нижний правый,четвёртым нижний левый угол ( по часовой стрелке )
8.border-radius:10px/10px 10px/10px 10px/10px 10px/10px; - эллипсуем первым значением верхний левый угол,вторым верхний правый,третьим нижний правый,четвёртым нижний левый угол ( по часовой стрелке )
Свойство применимо к элементам кроме элементов таблицы,у которых свойство border-collapse сопровождается значением collapse,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




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


Свойство
Описание
border-top-left-radiusУказывает верхний левый угол
border-top-right-radiusУказывает верхний правый угол
border-bottom-right-radiusУказывает нижний правый угол
border-bottom-left-radiusУказывает нижний левый угол
-webkit-border-top-left-radiusАльтернативное свойство Safari и Chrome для свойства border-top-left-radius
-webkit-border-top-right-radiusАльтернативное свойство Safari и Chrome для свойства border-top-right-radius
-webkit-border-bottom-right-radiusАльтернативное свойство Safari и Chrome для свойства border-bottom-right-radius
-webkit-border-bottom-left-radiusАльтернативное свойство Safari и Chrome для свойства border-bottom-left-radius
-moz-border-radius-topleftАльтернативное свойство Mozila для свойства border-top-left-radius
-moz-border-radius-toprightАльтернативное свойство Mozila для свойства border-top-right-radius
-moz-border-radius-bottomrightАльтернативное свойство Mozila для свойства border-bottom-right-radius
-moz-border-radius-bottomleftАльтернативное свойство Mozila для свойства border-bottom-left-radius


Дополнительные значения применяемые к border-radius


Значение
Описание
<Число>Любое положительное число
<Процент>Значение в процентах

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-radius</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.one {
border:10px double red;
padding:10px;
color:#fff;
width:300px;
height:70px;
background:green;
}
-->
</style>
</head>
<body>
<div style="border-radius:20px 40px 20px;" class="one" >Закругляем</div>
<br>
<div style="border-radius:30% 30%/20px 30%;" class="one" >Эллипсуем</div>
</body>
</html>

Пример в действии




Генератор свойства border-radius



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-background/#the-border-radius
Категория: Свойства углов | Добавил: IZOTOP (11.05.2012) | Автор: Меренков Михаил E W
Просмотров: 655 | Теги: css, что означает, border-radius, style, для чего | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]