multicolor-image-4.html (2226B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of border-image</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta http-equiv="Content-Style-Type" content="text/css"> 7 <style type="text/css"> 8 9 /** 10 * This is a copy of multicolor-image-2.html with a few changes: 11 * (1) the whole thing is inside a transform 12 * (2) different border-images have different values for 13 * repeat/stretch/round 14 */ 15 16 body { 17 width: 100px; 18 transform: translate(100px, 100px) scale(2,3); 19 transform-origin: 0 0; 20 } 21 22 div { 23 background: red; /* fail if this shows through */ 24 background-image: url('3x3multicolor.png'); /* fail if this shows through */ 25 margin-bottom: 2px; 26 } 27 28 div.one { 29 border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch; 30 border-width: 4px 6px 8px 11px; 31 border-style: solid; 32 width: 9px; 33 height: 1px; 34 } 35 36 div.two { 37 border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat; 38 border-width: 3px 1px 0px 4px; 39 border-style: solid; 40 width: 2px; 41 height: 17px; 42 } 43 44 div.three { 45 border-image: url(10x5multicolor.png) 40% 2 1 30% fill round; 46 border-width: 10px 2px 5px 3px; 47 border-style: solid; 48 width: 17px; 49 height: 8px; 50 } 51 52 div.four { 53 border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round; 54 border-width: 5px 7px 1px 0; 55 border-style: solid; 56 width: 8px; 57 height: 5px; 58 } 59 60 div.five { 61 border-width: 4px 8px 10px 2px; 62 border-style: solid; 63 border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch; 64 width: 0; 65 height: 8px; 66 } 67 68 div.six { 69 border-width: 4px 0 10px 2px; 70 border-style: solid; 71 border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat; 72 width: 17px; 73 height: 0; 74 } 75 76 div.seven { 77 border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat; 78 border-width: 1px 3px 0 0; 79 border-style: solid; 80 width: 17px; 81 height: 0; 82 } 83 84 </style> 85 </head> 86 <body> 87 <div class="one"></div> 88 <div class="two"></div> 89 <div class="three"></div> 90 <div class="four"></div> 91 <div class="five"></div> 92 <div class="six"></div> 93 <div class="seven"></div> 94 </body> 95 </html>