border-image-repeat-space-5-ref-1.html (4622B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Border Image: border-image-repeat: space</title> 6 <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> 7 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 8 <link rel="match" href="border-image-repeat-space-5-ref-2.html"> 9 <style type="text/css"> 10 .outer { 11 width: 135px; 12 height: 135px; 13 } 14 .inner1 { 15 position: absolute; 16 top: 0px; 17 left: 0px; 18 width: 27px; 19 height: 27px; 20 background-image: url("support/border.png"); 21 } 22 .inner2_1 { 23 position: absolute; 24 top: 0px; 25 left: 27px; 26 width: 27px; 27 height: 27px; 28 background-image: url("support/border.png"); 29 background-position: -27px 0px; 30 } 31 .inner2_2 { 32 position: absolute; 33 top: 0px; 34 left: 54px; 35 width: 27px; 36 height: 27px; 37 background-image: url("support/border.png"); 38 background-position: -27px 0px; 39 } 40 .inner2_3 { 41 position: absolute; 42 top: 0px; 43 left: 81px; 44 width: 27px; 45 height: 27px; 46 background-image: url("support/border.png"); 47 background-position: -27px 0px; 48 } 49 .inner3 { 50 position: absolute; 51 top: 0px; 52 left: 108px; 53 width: 27px; 54 height: 27px; 55 background-image: url("support/border.png"); 56 } 57 .inner4_1 { 58 position: absolute; 59 top: 27px; 60 left: 0px; 61 width: 27px; 62 height: 27px; 63 background-image: url("support/border.png"); 64 background-position: 0px -27px; 65 } 66 .inner4_2 { 67 position: absolute; 68 top: 54px; 69 left: 0px; 70 width: 27px; 71 height: 27px; 72 background-image: url("support/border.png"); 73 background-position: 0px -27px; 74 } 75 .inner4_3 { 76 position: absolute; 77 top: 81px; 78 left: 0px; 79 width: 27px; 80 height: 27px; 81 background-image: url("support/border.png"); 82 background-position: 0px -27px; 83 } 84 .inner5_1 { 85 position: absolute; 86 top: 27px; 87 left: 108px; 88 width: 27px; 89 height: 27px; 90 background-image: url("support/border.png"); 91 background-position: -54px -27px; 92 } 93 .inner5_2 { 94 position: absolute; 95 top: 54px; 96 left: 108px; 97 width: 27px; 98 height: 27px; 99 background-image: url("support/border.png"); 100 background-position: -54px -27px; 101 } 102 .inner5_3 { 103 position: absolute; 104 top: 81px; 105 left: 108px; 106 width: 27px; 107 height: 27px; 108 background-image: url("support/border.png"); 109 background-position: -54px -27px; 110 } 111 .inner6 { 112 position: absolute; 113 top: 108px; 114 left: 0px; 115 width: 27px; 116 height: 27px; 117 background-image: url("support/border.png"); 118 } 119 .inner7_1 { 120 position: absolute; 121 top: 108px; 122 left: 27px; 123 width: 27px; 124 height: 27px; 125 background-image: url("support/border.png"); 126 background-position: -27px -54px; 127 } 128 .inner7_2 { 129 position: absolute; 130 top: 108px; 131 left: 54px; 132 width: 27px; 133 height: 27px; 134 background-image: url("support/border.png"); 135 background-position: -27px -54px; 136 } 137 .inner7_3 { 138 position: absolute; 139 top: 108px; 140 left: 81px; 141 width: 27px; 142 height: 27px; 143 background-image: url("support/border.png"); 144 background-position: -27px -54px; 145 } 146 .inner8 { 147 position: absolute; 148 top: 108px; 149 left: 108px; 150 width: 27px; 151 height: 27px; 152 background-image: url("support/border.png"); 153 } 154 </style> 155 </head> 156 <body> 157 <div class="outer"> 158 <div class="inner1"></div> 159 <div class="inner2_1"></div> 160 <div class="inner2_2"></div> 161 <div class="inner2_3"></div> 162 <div class="inner3"></div> 163 <div class="inner4_1"></div> 164 <div class="inner4_2"></div> 165 <div class="inner4_3"></div> 166 <div class="inner5_1"></div> 167 <div class="inner5_2"></div> 168 <div class="inner5_3"></div> 169 <div class="inner6"></div> 170 <div class="inner7_1"></div> 171 <div class="inner7_2"></div> 172 <div class="inner7_3"></div> 173 <div class="inner8"></div> 174 </div> 175 </body> 176 </html>