CSS rund kant

CSS rund kant

Genom CSS border-radius Egenskaper kan implementera alla elementets "runda hörn"-stil.

CSS border-radius egenskap

CSS border-radius Egenskapen definierar elementets hörnradie.

Tips：Du kan använda detta egenskap för att lägga till kantkullor på element!

Här finns tre exempel:

1. Kantkullor på element med specificerad bakgrundsfärg:

Kantkurvor!

2. Kantkullor på element med ram:

Kantkurvor!

3. Kantkullor på element med bakgrundsbild：

Kantkurvor!

Detta är koden:

Exempel

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

Prova själv

Tips：border-radius Egenskapen är i själva verket en förkortning för följande egenskaper：

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

CSS border-radius - specificera varje hörn

border-radius Egenskapen kan acceptera ett till fyra värden. Reglerna är följande：

Fyra värden - border-radius: 15px 50px 30px 5px;（Används i tur och ordning för: vänstra övre hörn, högra övre hörn, högra nedre hörn, vänstra nedre hörn）：

Tre värden - border-radius: 15px 50px 30px;（Första värdet används för vänstra övre hörn, andra värdet används för högra övre och vänstra hörn, tredje för högra nedre hörn）：

Två värden - border-radius: 15px 50px;（Första värdet används för vänstra övre och nedre hörn, andra värdet används för högra övre och vänstra hörn）：

En värde - border-radius: 15px;（Denna värde används för alla fyra hörn, kantkurvorna är lika）：

Detta är koden:

Exempel

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

Prova själv

Du kan också skapa ellipse Kantar:

Exempel

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

Prova själv

CSS kantkulaegenskap

Egenskap Beskrivning
border-radius Används för att ställa in kortform för alla fyra border-*-*-radius-egenskaper.
border-top-left-radius Definiera formen på kanthörnet till vänster upp.
border-top-right-radius Definiera formen på kanthörnet till höger upp.
border-bottom-right-radius Definiera formen på kanthörnet till höger nere.
border-bottom-left-radius Definiera formen på kanthörnet till vänster nere.