| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Border Image: border-image-repeat: space</title> |
| <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> |
| <link rel="author" title="Mozilla" href="https://www.mozilla.org"> |
| <link rel="match" href="border-image-repeat-space-5-ref-2.html"> |
| <style type="text/css"> |
| .outer { |
| width: 135px; |
| height: 135px; |
| } |
| .inner1 { |
| position: absolute; |
| top: 0px; |
| left: 0px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| } |
| .inner2_1 { |
| position: absolute; |
| top: 0px; |
| left: 27px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: -27px 0px; |
| } |
| .inner2_2 { |
| position: absolute; |
| top: 0px; |
| left: 54px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: -27px 0px; |
| } |
| .inner2_3 { |
| position: absolute; |
| top: 0px; |
| left: 81px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: -27px 0px; |
| } |
| .inner3 { |
| position: absolute; |
| top: 0px; |
| left: 108px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| } |
| .inner4_1 { |
| position: absolute; |
| top: 27px; |
| left: 0px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: 0px -27px; |
| } |
| .inner4_2 { |
| position: absolute; |
| top: 54px; |
| left: 0px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: 0px -27px; |
| } |
| .inner4_3 { |
| position: absolute; |
| top: 81px; |
| left: 0px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: 0px -27px; |
| } |
| .inner5_1 { |
| position: absolute; |
| top: 27px; |
| left: 108px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: -54px -27px; |
| } |
| .inner5_2 { |
| position: absolute; |
| top: 54px; |
| left: 108px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: -54px -27px; |
| } |
| .inner5_3 { |
| position: absolute; |
| top: 81px; |
| left: 108px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: -54px -27px; |
| } |
| .inner6 { |
| position: absolute; |
| top: 108px; |
| left: 0px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| } |
| .inner7_1 { |
| position: absolute; |
| top: 108px; |
| left: 27px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: -27px -54px; |
| } |
| .inner7_2 { |
| position: absolute; |
| top: 108px; |
| left: 54px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: -27px -54px; |
| } |
| .inner7_3 { |
| position: absolute; |
| top: 108px; |
| left: 81px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| background-position: -27px -54px; |
| } |
| .inner8 { |
| position: absolute; |
| top: 108px; |
| left: 108px; |
| width: 27px; |
| height: 27px; |
| background-image: url("support/border.png"); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="outer"> |
| <div class="inner1"></div> |
| <div class="inner2_1"></div> |
| <div class="inner2_2"></div> |
| <div class="inner2_3"></div> |
| <div class="inner3"></div> |
| <div class="inner4_1"></div> |
| <div class="inner4_2"></div> |
| <div class="inner4_3"></div> |
| <div class="inner5_1"></div> |
| <div class="inner5_2"></div> |
| <div class="inner5_3"></div> |
| <div class="inner6"></div> |
| <div class="inner7_1"></div> |
| <div class="inner7_2"></div> |
| <div class="inner7_3"></div> |
| <div class="inner8"></div> |
| </div> |
| </body> |
| </html> |
| |