CSS -grens-bo-links-radius Eiendom
Voorbeeld
Voeg afgeronde grense by die boonste linkerhoek van twee <div>-elemente:
#example1 {
border: 2px solid red;
border-top-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-left-radius: 50px
20px;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die border-top-left-radius
eiendom definieer die radius van die boonste linkerhoek.
Wenk: Hierdie eiendom laat jou toe om geronde grense by elemente te voeg!
Standaard waarde: | 0 |
---|---|
Geërf: | geen |
Animateerbaar: | ja. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | voorwerp .style.borderTopLeftRadius="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-top-left-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS-sintaksis
border-top-left-radius: length|% [length|%]|initial|inherit;
Let wel: As jy twee waardes stel, is die eerste een vir die boonste rand, en die tweede een vir die linkerrand. As die tweede waarde weggelaat word, word dit vanaf die eerste gekopieer. As enige lengte nul is, is die hoek vierkantig, nie afgerond nie.
Eiendomswaardes
Value | Description | Play it |
---|---|---|
length | Defines the shape of the top-left corner. Read about length units | |
% | Defines the shape of the top-left corner 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
Voeg afgeronde grense by die boonste linkerhoek in persentasie:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-left-radius: 40%;
}
Verwante bladsye
CSS handleiding: CSS afgeronde hoeke
HTML DOM verwysing: borderTopLeftRadius eiendom