border-image-repeating-radial-gradient-slice-1-ref.html (5308B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of border-image-source: radial-gradient with border-image-slice</title> 5 <style> 6 table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } 7 td { padding: 0; } 8 </style> 9 </head> 10 <body> 11 <table> 12 <col style="width: 30px"> 13 <col style="width: 180px"> 14 <col style="width: 30px"> 15 <tr style="height: 30px"> 16 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: 0px 0px;"></td> 17 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 600px; background-position: -10px 0px;"></td> 18 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: -570px 0px;"></td> 19 </tr> 20 <tr style="height: 180px"> 21 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 200px; background-position: 0px -10px;"></td> 22 <td style="background: white"></td> 23 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 200px; background-position: -570px -10px;"></td> 24 </tr> 25 <tr style="height: 30px"> 26 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: 0px -570px;"></td> 27 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 600px; background-position: -10px -570px;"></td> 28 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: -570px -570px;"></td> 29 </tr> 30 </table> 31 <table> 32 <col style="width: 30px"> 33 <col style="width: 180px"> 34 <col style="width: 30px"> 35 <tr style="height: 30px"> 36 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px 0px;"></td> 37 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px 0px;"></td> 38 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px 0px;"></td> 39 </tr> 40 <tr style="height: 180px"> 41 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px -30px;"></td> 42 <td style="background: white"></td> 43 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px -30px;"></td> 44 </tr> 45 <tr style="height: 30px"> 46 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px -210px;"></td> 47 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px -210px;"></td> 48 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px -210px;"></td> 49 </tr> 50 </table> 51 <table> 52 <col style="width: 30px"> 53 <col style="width: 180px"> 54 <col style="width: 30px"> 55 <tr style="height: 30px"> 56 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: 0px 0px;"></td> 57 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 120px; background-position: -90px 0px;"></td> 58 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: -90px 0px;"></td> 59 </tr> 60 <tr style="height: 180px"> 61 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 360px; background-position: 0px -90px;"></td> 62 <td style="background: white"></td> 63 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 360px; background-position: -210px -90px;"></td> 64 </tr> 65 <tr style="height: 30px"> 66 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: 0px -90px;"></td> 67 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 120px; background-position: -90px -210px;"></td> 68 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: -90px -90px;"></td> 69 </tr> 70 </table> 71 </body> 72 </html>