Zaokrąglenie CSS

Zaokrąglenie CSS

Przez CSS border-radius Atrybut, który może realizować styl 'zaokrąglone krawędzie' dla każdego elementu.

CSS właściwość border-radius

CSS border-radius Atrybut definiuje promień rogu elementu.

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

Oto trzy przykłady：

1. Rogi zaokrąglone elementów z określonym kolorem tła：

Zaokrąglone rogi!

2. Rogi zaokrąglone elementów z obramowaniem：

Zaokrąglone rogi!

3. Rogi zaokrąglone elementów z tłem graficznym：

Zaokrąglone rogi!

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 dla: lewego górnego rogu、prawego górnego rogu、prawego dolnego rogu、lewego dolnego rogu）：

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

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

Jedna wartość - border-radius: 15px;（Ta wartość jest używana dla wszystkich czterech rogów, zaokrąglania 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:

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 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.