border-image-repeat

ОписаниС

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 typediscrete
ΠšΠ°Π½ΠΎΠ½ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ ΠΏΠΎΡ€ΡΠ΄ΠΎΠΊΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹ΠΉ порядок, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΉ Π³Ρ€Π°ΠΌΠΌΠ°Ρ‚ΠΈΠΊΠΎΠΉ

Бинтаксис

/* 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, or round keywords denoting how the image is treated both horizontally and vertically.
horizontal
One of the stretch, repeat, or round keywords denoting how the image is treated horizontally.
vertical
One of the stretch, repeat, or round keywords 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.

Π€ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ синтаксис

[ stretch | repeat | round | space ]{1,2}

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

See border-image for examples of what repeat values will do.

Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ

БпСцификация Бтатус ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ
CSS Backgrounds and Borders Module Level 3
ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ 'border-image-repeat' Π² этой спСцификации.
ΠšΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚ Π² Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠŸΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅

Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

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.

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅