border-image-repeating-radial-gradient-ref.html (1120B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of border-image-source: radial-gradient</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:30px 30px;"></td> 17 <td></td> 18 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 30px;"></td> 19 </tr> 20 <tr style="height: 180px"> 21 <td></td> 22 <td style="background: white"></td> 23 <td></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:30px 30px;"></td> 27 <td></td> 28 <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 30px;"></td> 29 </tr> 30 </table> 31 </body> 32 </html>