border-image-repeating-linear-gradient-ref.html 1.1 KB

123456789101112131415161718192021222324252627282930313233
  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3. <head>
  4. <title>test of border-image-source: linear-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-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
  17. <td></td>
  18. <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); 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-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
  27. <td></td>
  28. <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
  29. </tr>
  30. </table>
  31. </body>
  32. </html>