border-image-repeat-space-10-ref.html (3081B)
1 <!doctype html> 2 <html> 3 <title>Reference: border-image-repeat:space</title> 4 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 5 6 <style> 7 body > div { position: relative; margin-bottom: calc(27px * 2); } 8 body > div > div { 9 position: absolute; 10 width: 27px; 11 height: 27px; 12 background-image: url("support/border.png"); 13 } 14 15 .outer1 { width: 26px; height: 26px; } 16 .outer2 { width: 53px; height: 53px; } 17 .outer3 { width: 70px; height: 70px; } 18 19 .outer1 > .inner2, .outer1 > .inner4, .outer1 > .inner5, .outer1 > .inner7, 20 .outer2 > .inner2, .outer2 > .inner4, .outer2 > .inner5, .outer2 > .inner7, 21 .outer3 > .inner2, .outer3 > .inner3, .outer3 > .inner5, .outer3 > .inner6, 22 .outer3 > .inner7, .outer3 > .inner8, .outer3 > .inner10, .outer3 > .inner11 { 23 background-position: -27px 0px; 24 } 25 26 /* 27 This mocks up the drawing algorithm for border-image, by hand, 28 with an absolutely-positioned innerN div for each tile of a border 29 image component. And the components are positioned using calc() 30 expressions that involve: the border's thickness, the element's 31 content-box size, and the expected number of tiled repetitions 32 (e.g. 2) and gaps-between-repetitions (e.g. 3). 33 */ 34 35 .outer1 > .inner3, .outer1 > .inner8 { left: calc(27px + 26px); } 36 .outer1 > .inner6, .outer1 > .inner8 { top: calc(27px + 26px); } 37 38 .outer2 > .inner3, .outer2 > .inner5, .outer2 > .inner8 { left: calc(27px + 53px); } 39 .outer2 > .inner2, .outer2 > .inner7 { left: calc(27px + ((53px - 27px) / 2)); } 40 .outer2 > .inner4, .outer2 > .inner5 { top: calc(27px + ((53px - 27px) / 2)); } 41 .outer2 > .inner6, .outer2 > .inner7, .outer2 > .inner8 { top: calc(27px + 53px); } 42 43 .outer3 > .inner4, .outer3 > .inner6, .outer3 > .inner8, .outer3 > .inner12 { left: calc(27px + 70px); } 44 .outer3 > .inner2, .outer3 > .inner10 { left: calc(27px + ((70px - (27px * 2)) / 3)); } 45 .outer3 > .inner3, .outer3 > .inner11 { left: calc(70px - ((70px - (27px * 2)) / 3)); } 46 .outer3 > .inner5, .outer3 > .inner6 { top: calc(27px + ((70px - (27px * 2)) / 3)); } 47 .outer3 > .inner7, .outer3 > .inner8 { top: calc(70px - ((70px - (27px * 2)) / 3)); } 48 .outer3 > .inner9, .outer3 > .inner10, .outer3 > .inner11, .outer3 > .inner12 { top: calc(27px + 70px); } 49 50 </style> 51 52 <div class="outer1"> 53 <div class="inner1"></div> 54 <div class="inner3"></div> 55 <div class="inner6"></div> 56 <div class="inner8"></div> 57 </div> 58 <div class="outer2"> 59 <div class="inner1"></div> 60 <div class="inner2"></div> 61 <div class="inner3"></div> 62 <div class="inner4"></div> 63 <div class="inner5"></div> 64 <div class="inner6"></div> 65 <div class="inner7"></div> 66 <div class="inner8"></div> 67 </div> 68 69 <div class="outer3"> 70 <div class="inner1"></div> 71 <div class="inner2"></div> 72 <div class="inner3"></div> 73 <div class="inner4"></div> 74 <div class="inner5"></div> 75 <div class="inner6"></div> 76 <div class="inner7"></div> 77 <div class="inner8"></div> 78 <div class="inner9"></div> 79 <div class="inner10"></div> 80 <div class="inner11"></div> 81 <div class="inner12"></div> 82 </div> 83 84 </html>