border-image-repeat-space-6-ref.html (2496B)
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: 81px; 11 height: 81px; 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 { 22 position: absolute; 23 top: 0px; 24 left: 27px; 25 width: 27px; 26 height: 27px; 27 background-image: url("support/reticule-to.png"); 28 } 29 .inner3 { 30 position: absolute; 31 top: 0px; 32 left: 54px; 33 width: 27px; 34 height: 27px; 35 background-image: url("support/reticule-tr.png"); 36 } 37 .inner4 { 38 position: absolute; 39 top: 27px; 40 left: 0px; 41 width: 27px; 42 height: 27px; 43 background-image: url("support/reticule-le.png"); 44 } 45 .inner5 { 46 position: absolute; 47 top: 27px; 48 left: 27px; 49 width: 27px; 50 height: 27px; 51 background-image: url("support/reticule-ct.png"); 52 } 53 .inner6 { 54 position: absolute; 55 top: 27px; 56 left: 54px; 57 width: 27px; 58 height: 27px; 59 background-image: url("support/reticule-ri.png"); 60 } 61 .inner7 { 62 position: absolute; 63 top: 54px; 64 left: 0px; 65 width: 27px; 66 height: 27px; 67 background-image: url("support/reticule-bl.png"); 68 } 69 .inner8 { 70 position: absolute; 71 top: 54px; 72 left: 27px; 73 width: 27px; 74 height: 27px; 75 background-image: url("support/reticule-bo.png"); 76 } 77 .inner9 { 78 position: absolute; 79 top: 54px; 80 left: 54px; 81 width: 27px; 82 height: 27px; 83 background-image: url("support/reticule-br.png"); 84 } 85 </style> 86 </head> 87 <body> 88 <div class="outer"> 89 <div class="inner1"></div> 90 <div class="inner2"></div> 91 <div class="inner3"></div> 92 <div class="inner4"></div> 93 <div class="inner5"></div> 94 <div class="inner6"></div> 95 <div class="inner7"></div> 96 <div class="inner8"></div> 97 <div class="inner9"></div> 98 </div> 99 </body> 100 </html>