Пятница, 29 Марта 2013 14:34

Свойство border-radius

Written by 
Оцени эту запись
(2 Голоса)

Свойство border-radius задает скругление границы элемента или фона.

 

Пример:

 

border-radius: 20px;

 

 

Text
Text

 

 

Свойство введено в CSS3 и до сих пор не является кроссбраузерным. Для его использования нужно применять вендорные префиксы:

 

 

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
 
 
Значением свойства border-radius может быть одно, два, три или четыре значения, которые задают скругления разных углов:
 
 
border-radius: 20px;
border-radius: 20px 10px;
border-radius: 20px 10px 5px;
border-radius: 20px 10px 5px 15px;
 

Одно значение свойства border-radius делает одинаковое скругления всех углов. Если задано два значения, то первое относится к верхнему левому и нижнему правому углам, а второе к верхнему правому и нижнему левому. Если же задано три значения, то первое соответствует левому верхнему, второе - верхнему правому и нижнему левому, а третье - нижнему правому. Если заданы все четыре значения, то они относятся по очереди к верхнему левому, верхнему правому, нижнему правому и нижнему левому.

 

Если значению радиуса скругления задано в процентах, то они отсчитываются от ширины элемента:

 

 

border-radius: 30%;

 

Можно также задавать эллиптические радиусы кругления через слеш:

 

border-radius: 20px/10px;

 

 

border-radius: 20px/10px;

 

Здесь первом значение свойства border-radiusсоответствует скруглению по горизонтали, а второе - по вертикали.

 

Таким образом можно делать простые эллипсы:

 

border-radius: 90px/70px;

 

 

 

 

 

Значение по умолчанию - 0.

 

 

Кроме свойства border-radius, есть отдельные свойства для задания каждого отдельного угла:

 

  • border-top-left-radius - радиус скругления верхнего левого угла
  • border-top-right-radius - радиус скругления верхнего правого угла
  • border-bottom-left-radius - радиус скругления нижнего левого угла
  • border-bottom-right-radius - радиус скругления нижнего правого угла

 

 

border-top-left-radius: 20px;

 

 

 

 

 

Border-radius для картинок

 

 

 
Свойство border-radius
Свойство border-radius 2

Свойство border-radius 2

 

 

В первом случае мы используем блок с фоновым изображением, изображение обрезается по скруглению углов. Во втором случае - изображения вставлено внутрь блока и блоку задано overflow: hidden. В третьем же случае у нас просто блок со скругленными углами, в который вставлено изображение. Углы изображения не скругляются. В последнем случае у нас изображение, к которому применили border-radius. 

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов