border-image-repeat-space-3-ref.html (3477B)
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: 114px; 11 height: 114px; 12 } 13 .inner1 { 14 position: absolute; 15 top: 0px; 16 left: 0px; 17 width: 27px; 18 height: 27px; 19 background-image: url("support/border.png"); 20 } 21 .inner2_1 { 22 position: absolute; 23 top: 0px; 24 left: 29px; 25 width: 27px; 26 height: 27px; 27 background-image: url("support/border.png"); 28 background-position: -27px 0px; 29 } 30 .inner2_2 { 31 position: absolute; 32 top: 0px; 33 left: 58px; 34 width: 27px; 35 height: 27px; 36 background-image: url("support/border.png"); 37 background-position: -27px 0px; 38 } 39 .inner3 { 40 position: absolute; 41 top: 0px; 42 left: 87px; 43 width: 27px; 44 height: 27px; 45 background-image: url("support/border.png"); 46 } 47 .inner4_1 { 48 position: absolute; 49 top: 29px; 50 left: 0px; 51 width: 27px; 52 height: 27px; 53 background-image: url("support/border.png"); 54 background-position: 0px -27px; 55 } 56 .inner4_2 { 57 position: absolute; 58 top: 58px; 59 left: 0px; 60 width: 27px; 61 height: 27px; 62 background-image: url("support/border.png"); 63 background-position: 0px -27px; 64 } 65 .inner5_1 { 66 position: absolute; 67 top: 29px; 68 left: 87px; 69 width: 27px; 70 height: 27px; 71 background-image: url("support/border.png"); 72 background-position: -54px -27px; 73 } 74 .inner5_2 { 75 position: absolute; 76 top: 58px; 77 left: 87px; 78 width: 27px; 79 height: 27px; 80 background-image: url("support/border.png"); 81 background-position: -54px -27px; 82 } 83 .inner6 { 84 position: absolute; 85 top: 87px; 86 left: 0px; 87 width: 27px; 88 height: 27px; 89 background-image: url("support/border.png"); 90 } 91 .inner7_1 { 92 position: absolute; 93 top: 87px; 94 left: 29px; 95 width: 27px; 96 height: 27px; 97 background-image: url("support/border.png"); 98 background-position: -27px -54px; 99 } 100 .inner7_2 { 101 position: absolute; 102 top: 87px; 103 left: 58px; 104 width: 27px; 105 height: 27px; 106 background-image: url("support/border.png"); 107 background-position: -27px -54px; 108 } 109 .inner8 { 110 position: absolute; 111 top: 87px; 112 left: 87px; 113 width: 27px; 114 height: 27px; 115 background-image: url("support/border.png"); 116 } 117 </style> 118 </head> 119 <body> 120 <div class="outer"> 121 <div class="inner1"></div> 122 <div class="inner2_1"></div> 123 <div class="inner2_2"></div> 124 <div class="inner3"></div> 125 <div class="inner4_1"></div> 126 <div class="inner4_2"></div> 127 <div class="inner5_1"></div> 128 <div class="inner5_2"></div> 129 <div class="inner6"></div> 130 <div class="inner7_1"></div> 131 <div class="inner7_2"></div> 132 <div class="inner8"></div> 133 </div> 134 </body> 135 </html>