multicolor-image-2.html (2705B)
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 div { 10 background: red; /* fail if this shows through */ 11 background-image: url('3x3multicolor.png'); /* fail if this shows through */ 12 margin-bottom: 2px; 13 } 14 15 div.one { 16 border-image: url(10x5multicolor.png) 2 2 1 3 fill; 17 -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill; 18 border-image: url(10x5multicolor.png) 2 2 1 3 fill; 19 border-width: 4px 6px 8px 11px; 20 border-style: solid; 21 width: 9px; 22 height: 1px; 23 } 24 25 div.two { 26 border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill; 27 -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill; 28 border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill; 29 border-width: 3px 1px 0px 4px; 30 border-style: solid; 31 width: 2px; 32 height: 17px; 33 } 34 35 div.three { 36 border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 37 -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 38 border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 39 border-width: 10px 2px 5px 3px; 40 border-style: solid; 41 width: 17px; 42 height: 8px; 43 } 44 45 div.four { 46 border-image: url(10x5multicolor.png) 2 2 20% 30% fill; 47 -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill; 48 border-image: url(10x5multicolor.png) 2 2 20% 30% fill; 49 border-width: 5px 7px 1px 0; 50 border-style: solid; 51 width: 8px; 52 height: 5px; 53 } 54 55 div.five { 56 border-width: 4px 8px 10px 2px; 57 border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 58 -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 59 border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 60 border-style: solid; 61 width: 0; 62 height: 8px; 63 } 64 65 div.six { 66 border-width: 4px 0 10px 2px; 67 border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 68 -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 69 border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 70 border-style: solid; 71 width: 17px; 72 height: 0; 73 } 74 75 div.seven { 76 border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 77 -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 78 border-image: url(10x5multicolor.png) 40% 2 1 30% fill; 79 border-width: 1px 3px 0 0; 80 border-style: solid; 81 width: 17px; 82 height: 0; 83 } 84 85 </style> 86 </head> 87 <body> 88 <div class="one"></div> 89 <div class="two"></div> 90 <div class="three"></div> 91 <div class="four"></div> 92 <div class="five"></div> 93 <div class="six"></div> 94 <div class="seven"></div> 95 </body> 96 </html>