ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
The border-image-repeat CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.
| ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ | stretch |
|---|---|
| ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ | Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΡΠΎΠΌΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΡΠ°Π±Π»ΠΈΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΠ³Π΄Π° border-collapse:collapse. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ::first-letter. |
| ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ | Π½Π΅Ρ |
| ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ | Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ |
| ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ | ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ |
| Animation type | discrete |
| ΠΠ°Π½ΠΎΠ½ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ | ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΡΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΉ ΡΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π³ΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΠΎΠΉ |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
/* border-image-repeat: type */
border-image-value: stretch;
/* border-image-repeat: horizontal vertical */
border-image-width: round stretch;
/* ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- type
- One of the
stretch,repeat, orroundkeywords denoting how the image is treated both horizontally and vertically. - horizontal
- One of the
stretch,repeat, orroundkeywords denoting how the image is treated horizontally. - vertical
- One of the
stretch,repeat, orroundkeywords denoting how the image is treated vertically. stretch- Keyword indicating that the image must be stretched to fill the gap between the two borders.
repeat- Keyword indicating that the image must be repeated until it fills the gap between the two borders.
round- Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated for an integral number of times, the image is rescaled to fit.
space- The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.
Π€ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΠΡΠΈΠΌΠ΅ΡΡ
See border-image for examples of what repeat values will do.
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
| Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ | Π‘ΡΠ°ΡΡΡ | ΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ 'border-image-repeat' Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ. |
ΠΠ°Π½Π΄ΠΈΠ΄Π°Ρ Π² ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ | ΠΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ |
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| ΠΠ°Π·ΠΎΠ²Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° | 15.0 | 15.0 (15.0) | 11 | 15 | 6[1] |
space |
ΠΠ΅Ρ[1] | ΠΠ΅Ρ[3] | 11 | ΠΠ΅Ρ | 9.1[5] |
round |
30[4] | 15.0 (15.0) | 11 | ? | 9.1[5] |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| ΠΠ°Π·ΠΎΠ²Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° | ? | 15.0 (15.0) | ΠΠ΅Ρ | ? | 9.3[5] |
[1] Support the space value, but the actual effect is the same as the repeat value.
[2] Support the round value, but the actual effect is the same as the repeat value.
[3] Π‘ΠΌ. Π±Π°Π³ 720531.
[4] Π‘ΠΌ. Chrome bug.
[5] Π‘ΠΌ. WebKit bug.