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