border-image-linear-gradient-repeat-repeat-2.html 704 B

123456789101112131415161718192021222324252627282930313233
  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3. <head>
  4. <title>test of border-image-source: linear-gradient with border-image-repeat</title>
  5. <style>
  6. div {
  7. border: 30px solid black;
  8. border-image: linear-gradient(to bottom right, red, blue);
  9. width: 180px;
  10. height: 180px;
  11. }
  12. div.border60repeat {
  13. border-image-repeat: repeat;
  14. border-image-slice: 60;
  15. }
  16. div.border60fillrepeat {
  17. border-image-repeat: repeat;
  18. border-image-slice: 60 fill;
  19. }
  20. div.border30fill2repeat {
  21. border-image-repeat: repeat;
  22. border-image-slice: 30 fill;
  23. border-image-width: 2;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="border60repeat"></div>
  29. <div class="border60fillrepeat"></div>
  30. <div class="border30fill2repeat"></div>
  31. </body>
  32. </html>