Закругления 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 Определение формы нижнего левого края рамки.