CSS afgeronde hoeke

❮ Vorige Volgende ❯

CSS afgeronde hoeke

Met die CSS border-radius-eienskap kan jy enige element "afgeronde hoeke" gee.

CSS grens-radius Eiendom

Die CSS border-radius-eienskap definieer die radius van 'n element se hoeke.

Wenk: Hierdie eiendom laat jou toe om geronde hoeke by elemente te voeg!

Hier is drie voorbeelde:

1. Afgeronde hoeke vir 'n element met 'n gespesifiseerde agtergrondkleur:

Afgeronde hoeke!

2. Afgeronde hoeke vir 'n element met 'n rand:

Afgeronde hoeke!

3. Afgeronde hoeke vir 'n element met 'n agtergrondprent:

Afgeronde hoeke!

Hier is die kode:

Voorbeeld

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

Wenk: Die border-radiuseiendom is eintlik 'n snelskrif-eiendom vir die border-top-left-radius, border-top-right-radius, border-bottom-right-radius en border-bottom-left-radiuseiendomme.

CSS grens-radius - Spesifiseer elke hoek

Die border-radiuseiendom kan van een tot vier waardes hê. Hier is die reëls:

Vier waardes - grens-radius: 15px 50px 30px 5px; (eerste waarde is van toepassing op die boonste linkerhoek, tweede waarde is van toepassing op die boonste regterhoek, derde waarde is van toepassing op die onderste regterhoek, en die vierde waarde is van toepassing op die onderste linkerhoek):

Drie waardes - grens-radius: 15px 50px 30px; (eerste waarde is van toepassing op die boonste linkerhoek, tweede waarde is van toepassing op die boonste regterkantste en onderste linkerhoeke, en die derde waarde is van toepassing op die onderste regterhoek):

Twee waardes - grens-radius: 15px 50px; (eerste waarde is van toepassing op links bo en onder-regs hoeke, en die tweede waarde is van toepassing op boonste-regs en onder-linker hoeke):

Een waarde - grens-radius: 15px; (die waarde is van toepassing op al vier hoeke, wat ewe afgerond is:

Hier is die kode:

Voorbeeld

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

Jy kan ook elliptiese hoeke skep:

Voorbeeld

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