CSS3 Закругленные углы
CSS3 Закругленные уголы границ
CSS3 свойству border-radius, можно придать любой элемент "закругленных углов".
CSS3 Свойство border-radius
CSS3 свойство border-radius определяет радиус угла элемента.
Совет: Это свойство позволяет добавлять закругленные границы к элементам!
Вот три примера:
1. Закругленные углы для элемента с заданным цветом фона:
Закругленные уголы!
2. Закругленные углы для элемента с границей:
Закругленные уголы!
3. Закругленные углы для элемента с фоновым изображением:
Закругленные уголы!
Вот код:
Пример
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
}
Попробуйте сами »
Совет: свойство border-radius сокращенное свойство для свойств
border-top-left-radius, border-top-right-radius,
border-bottom-right-radius и border-bottom-left-radius.
CSS3 закругленные границы - каждый угол
Свойство border-radius может иметь от одного до четырех значений.
Вот правила: Четыре свойства - border-radius: 15px 50px 30px 5px;
(первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу,
третье значение применяется к нижнему правому углу, а четвертое - к нижниму левому уголу):
Три свойства - border-radius: 15px 50px 30px;
(первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому и нижнему левому углы,
и третье значение применяется к нижнему правому углу):
Два свойства - border-radius: 15px 50px;
(первое значение применяется для верхнего левого и нижнего правого углов,
а второе значение применяется к верхнему правому и нижниму левому углы):
Одно свойство - border-radius: 15px;
(значение применяется ко всем четырем углам, которые будут закруглены одинаково:
Вот код:
Пример
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Попробуйте сами »
Можно также, создать эллиптические углы:
Пример
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Попробуйте сами »
CSS3 Упражнения
Свойства CSS3 закругленных углов
| Свойство | Описание |
|---|---|
| border-radius | Сокращенное свойство для установки всех четырех свойств border-*-*-radius |
| border-top-left-radius | Определяет форму границы верхнего левого угла |
| border-top-right-radius | Определяет форму границы верхнего правого угла |
| border-bottom-right-radius | Определяет форму границы нижнего правого угла |
| border-bottom-left-radius | Определяет форму границы нижнего левого угла |