Zaokrąglanie CSS

Zaokrąglanie CSS

Poprzez CSS border-radius Atrybut, który może zaimplementować styl 'zaokrąglone rogi' dla każdego elementu.

CSS border-radius

CSS border-radius Atrybut definiuje promień rogu elementu.

Wskazówka：Możesz użyć tego atrybutu, aby dodać zaokrąglone rogi elementowi!

Oto trzy przykłady：

1. Zaokrąglone elementy z określonym kolorem tła:

Zaokrąglone!

2. Zaokrąglone elementy z ramką:

Zaokrąglone!

3. Zaokrąglone elementy z tłem graficznym:

Zaokrąglone!

Oto kod:

Przykład

#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; 
}

Spróbuj sam

Wskazówka：border-radius Atrybut jest skróconą wersją następujących atrybutów：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - określa każdy róg

border-radius Atrybut może przyjąć od jednej do czterech wartości. Reguły są następujące：

Cztery wartości - border-radius: 15px 50px 30px 5px;（Każda z wartości jest używana odpowiednio: lewy górny róg, prawy górny róg, prawy dolny róg, lewy dolny róg）：

Trzy wartości - border-radius: 15px 50px 30px;（Pierwsza wartość jest używana dla lewego górnego rogu, druga dla prawego górnego i lewego dolnego rogu, trzecia dla prawego dolnego rogu）：

Dwa wartości - border-radius: 15px 50px;（Pierwsza wartość jest używana dla lewego górnego i prawego dolnego rogu, druga dla prawego górnego i lewego dolnego rogu）：

Jedna wartość - border-radius: 15px;（Ta wartość jest używana dla wszystkich czterech rogów, zaokrąglenia są takie same）：

Oto kod:

Przykład

#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; 
}

Spróbuj sam

Możesz również utworzyć zaokrąglone rogi elipsy:

Przykład

#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;
}

Spróbuj sam

Atrybut zaokrąglania krawędzi CSS

Atrybut Opis
border-radius Krótki atrybut ustawiający wszystkie cztery atrybuty border-*-*-radius.
border-top-left-radius Definiowanie kształtu krawędzi lewego górnego rogu.
border-top-right-radius Definiowanie kształtu krawędzi prawego górnego rogu.
border-bottom-right-radius Definiowanie kształtu krawędzi prawego dolnego rogu.
border-bottom-left-radius Definiowanie kształtu krawędzi lewego dolnego rogu.