CSS -grensbeeld- eiendom
Voorbeeld
Spesifiseer 'n prent as die rand rondom 'n element:
#borderimg {
border-image: url(border.png) 30 round;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die border-image
eiendom laat jou toe om 'n prent te spesifiseer wat as die rand om 'n element gebruik moet word.
Die grensbeeld-eienskap is 'n snelskrif-eienskap vir:
Weggelaat waardes word op hul verstekwaardes gestel.
Standaard waarde: | geen 100% 1 0 rek |
---|---|
Geërf: | geen |
Animateerbaar: | geen. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | voorwerp .style.borderImage="url(border.png) 30 ronde" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -webkit-, -moz-, of -o- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
Property | |||||
---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
Let wel: Sien individuele blaaierondersteuning vir elke waarde hieronder.
CSS-sintaksis
border-image: source slice width outset repeat|initial|inherit;
Eiendomswaardes
Value | Description | Play it |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
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
Verskillende snywaardes verander die voorkoms van die grens heeltemal:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Verwante bladsye
CSS handleiding: CSS Border Images
CSS-verwysing: border-image-outset eiendom
CSS-verwysing: border-image-repeat eiendom
CSS-verwysing: border-image-slice eiendom
CSS-verwysing: border-image-source eiendom
CSS-verwysing: border-image-width eiendom
HTML DOM verwysing: borderImage eiendom