CSS grens-radius Eiendom
Voorbeeld
Voeg afgeronde hoeke by twee <div>-elemente:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die border-radiuseienskap definieer die radius van die element se hoeke.
Wenk: Hierdie eiendom laat jou toe om geronde hoeke by elemente te voeg!
Hierdie eiendom 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:
| Standaard waarde: | 0 |
|---|---|
| Geërf: | geen |
| Animateerbaar: | ja. Lees oor animeerbaar |
| Weergawe: | CSS3 |
| JavaScript-sintaksis: | voorwerp .style.borderRadius="25px" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -webkit- of -moz- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
| Property | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS-sintaksis
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Let wel: Die vier waardes vir elke radius word gegee in die volgorde bo-links, bo-regs, onder-regs, onder-links. As links onder weggelaat word, is dit dieselfde as regs bo. As regs onder weggelaat word, is dit dieselfde as links bo. As regs bo weggelaat word, is dit dieselfde as links bo.
Eiendomswaardes
| Value | Description | Play it |
|---|---|---|
| length | Defines the shape of the corners. Default value is 0. Read about length units | |
| % | Defines the shape of the corners in % | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelde
Voorbeeld
Stel afgeronde hoeke vir 'n element met 'n agtergrondkleur:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Voorbeeld
Stel afgeronde hoeke vir 'n element met 'n rand:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Voorbeeld
Stel afgeronde hoeke vir 'n element met 'n agtergrondprent:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Voorbeeld
Let ook op:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
Verwante bladsye
CSS-tutoriaal: CSS-ronde hoeke
HTML DOM verwysing: borderRadius eiendom