border-image-linear-gradient-outset-ref.html (4171B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of border-image-source: linear-gradient with border-image-outset</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 style="margin-top: 75px; margin-right: 60px; margin-bottom: 15px; margin-left: 30px;"> 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: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td> 17 <td></td> 18 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td> 19 </tr> 20 <tr style="height: 165px"> 21 <td></td> 22 <td style="background: white"></td> 23 <td></td> 24 </tr> 25 <tr style="height: 30px"> 26 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td> 27 <td></td> 28 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td> 29 </tr> 30 </table> 31 <table style="margin-top: 15px; margin-right: 60px; margin-bottom: 15px; margin-left: 30px;"> 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: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: 0px 0px;"></td> 37 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -30px 0px;"></td> 38 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -210px 0px;"></td> 39 </tr> 40 <tr style="height: 165px"> 41 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: 0px -30px;"></td> 42 <td style="background: white"></td> 43 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -210px -30px;"></td> 44 </tr> 45 <tr style="height: 30px"> 46 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: 0px -195px;"></td> 47 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -30px -195px;"></td> 48 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -210px -195px;"></td> 49 </tr> 50 </table> 51 <table style="margin-top: 15px; margin-right: 60px; margin-bottom: 15px; margin-left: 30px;"> 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: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: 0px 0px;"></td> 57 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 562.5px; background-position: -90px 0px;"></td> 58 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: -90px 0px;"></td> 59 </tr> 60 <tr style="height: 165px"> 61 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 184.70px; background-position: 0px -9.85px;"></td> 62 <td style="background: white"></td> 63 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 184.70px; background-position: -210px -9.85px;"></td> 64 </tr> 65 <tr style="height: 30px"> 66 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: 0px -532.5px;"></td> 67 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 562.5px; background-position: -90px -532.5px;"></td> 68 <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: -90px -532.5px;"></td> 69 </tr> 70 </table> 71 </body> 72 </html>