CSS Закруглённые углы
CSS Закруглённые углы
С помощью CSS свойства border-radius вы можете придать любому элементу на веб-странице "закруглённые углы".
CSS свойство border-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 - Укажите каждый угол
Свойство 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;
}
Попробуйте сами »
Проверьте себя с помощью упражнений!
CSS Свойства для создания закруглённых углов
| Свойства | Описание |
|---|---|
| border-radius | Сокращенное свойство для установки всех четырех свойств border-*-*-radius |
| border-top-left-radius | Определяет форму границы верхнего левого угла |
| border-top-right-radius | Определяет форму границы верхнего правого угла |
| border-bottom-right-radius | Определяет форму границы нижнего правого угла |
| border-bottom-left-radius | Определяет форму границы нижнего левого угла |
