CSS Rounded Corners
CSS Закругленные углы
С помощью свойства CSS border-radius
можно присвоить любому элементу "закругленные углы".
CSS граница-свойство RADIUS
Свойство CSS 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
.
Граница CSS-радиус-укажите каждый угол
Свойство border-radius
может иметь от одного до четырех значений. Вот правила:
Четыре значения-граница-радиус: 15пкс 50px 30px 5px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, и четвертое значение применяется к нижнему левому углу):
Три значения-граница-радиус: 15пкс 50px 30px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему и нижнему левому углам, а третье значение применяется к нижнему правому углу):
Два значения-граница-радиус: 15пкс 50px; (первое значение применяется к верхнему левому и нижнему углам, а второе значение применяется к верхнему и нижнему левому углам):
Одно значение-граница-радиус: 15пкс; (значение применяется ко всем четырем углам, которые округляются одинаково:
Вот код:
Пример
#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;
}
Свойства скругленных углов CSS
Свойство | Описание |
---|---|
border-radius | Сокращенное свойство для установки всех четырех границ-*-*-свойства радиуса |
border-top-left-radius | Определяет форму границы верхнего левого угла |
border-top-right-radius | Определяет форму границы верхнего правого угла |
border-bottom-right-radius | Определяет форму границы нижнего правого угла |
border-bottom-left-radius | Определяет форму границы нижнего левого угла |