border-image-repeat-space-7-ref.html (4141B)
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 <style type="text/css"> 9 .outer { 10 width: 132px; 11 height: 132px; 12 } 13 .inner1 { 14 position: absolute; 15 top: 0px; 16 left: 0px; 17 width: 27px; 18 height: 27px; 19 background-image: url("support/reticule-tl.png"); 20 } 21 .inner2_1 { 22 position: absolute; 23 top: 0px; 24 left: 35px; 25 width: 27px; 26 height: 27px; 27 background-image: url("support/reticule-to.png"); 28 } 29 .inner2_2 { 30 position: absolute; 31 top: 0px; 32 left: 70px; 33 width: 27px; 34 height: 27px; 35 background-image: url("support/reticule-to.png"); 36 } 37 .inner3 { 38 position: absolute; 39 top: 0px; 40 left: 105px; 41 width: 27px; 42 height: 27px; 43 background-image: url("support/reticule-tr.png"); 44 } 45 .inner4_1 { 46 position: absolute; 47 top: 35px; 48 left: 0px; 49 width: 27px; 50 height: 27px; 51 background-image: url("support/reticule-le.png"); 52 } 53 .inner4_2 { 54 position: absolute; 55 top: 70px; 56 left: 0px; 57 width: 27px; 58 height: 27px; 59 background-image: url("support/reticule-le.png"); 60 } 61 .inner5_1 { 62 position: absolute; 63 top: 35px; 64 left: 35px; 65 width: 27px; 66 height: 27px; 67 background-image: url("support/reticule-ct.png"); 68 } 69 .inner5_2 { 70 position: absolute; 71 top: 35px; 72 left: 70px; 73 width: 27px; 74 height: 27px; 75 background-image: url("support/reticule-ct.png"); 76 } 77 .inner5_3 { 78 position: absolute; 79 top: 70px; 80 left: 35px; 81 width: 27px; 82 height: 27px; 83 background-image: url("support/reticule-ct.png"); 84 } 85 .inner5_4 { 86 position: absolute; 87 top: 70px; 88 left: 70px; 89 width: 27px; 90 height: 27px; 91 background-image: url("support/reticule-ct.png"); 92 } 93 .inner6_1 { 94 position: absolute; 95 top: 35px; 96 left: 105px; 97 width: 27px; 98 height: 27px; 99 background-image: url("support/reticule-ri.png"); 100 } 101 .inner6_2 { 102 position: absolute; 103 top: 70px; 104 left: 105px; 105 width: 27px; 106 height: 27px; 107 background-image: url("support/reticule-ri.png"); 108 } 109 .inner7 { 110 position: absolute; 111 top: 105px; 112 left: 0px; 113 width: 27px; 114 height: 27px; 115 background-image: url("support/reticule-bl.png"); 116 } 117 .inner8_1 { 118 position: absolute; 119 top: 105px; 120 left: 35px; 121 width: 27px; 122 height: 27px; 123 background-image: url("support/reticule-bo.png"); 124 } 125 .inner8_2 { 126 position: absolute; 127 top: 105px; 128 left: 70px; 129 width: 27px; 130 height: 27px; 131 background-image: url("support/reticule-bo.png"); 132 } 133 .inner9 { 134 position: absolute; 135 top: 105px; 136 left: 105px; 137 width: 27px; 138 height: 27px; 139 background-image: url("support/reticule-br.png"); 140 } 141 </style> 142 </head> 143 <body> 144 <div class="outer"> 145 <div class="inner1"></div> 146 <div class="inner2_1"></div> 147 <div class="inner2_2"></div> 148 <div class="inner3"></div> 149 <div class="inner4_1"></div> 150 <div class="inner4_2"></div> 151 <div class="inner5_1"></div> 152 <div class="inner5_2"></div> 153 <div class="inner5_3"></div> 154 <div class="inner5_4"></div> 155 <div class="inner6_1"></div> 156 <div class="inner6_2"></div> 157 <div class="inner7"></div> 158 <div class="inner8_1"></div> 159 <div class="inner8_2"></div> 160 <div class="inner9"></div> 161 </div> 162 </body> 163 </html>