gradient-infinity-002.html (1143B)
1 <!DOCTYPE html> 2 <link rel="match" href="gradient-infinity-002-ref.html"> 3 <link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com"> 4 <link rel="author" title="一丝" href="mailto:yiorsi@gmail.com"> 5 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> 6 <title>All boxes should have a lime background.</title> 7 <style> 8 .box { 9 display: flex; 10 flex-wrap: wrap; 11 gap: 10px; 12 } 13 .box > div { 14 width: 100px; 15 height: 100px; 16 border: solid 1px black; 17 padding: 1px; 18 } 19 .test1 { 20 background: linear-gradient(to right in srgb, lime 100px, red calc(1px / 0)); 21 } 22 .test2 { 23 background: linear-gradient(to right in srgb, lime 100px, red calc(Infinity * 1px)); 24 } 25 .test3 { 26 background: linear-gradient(to left in srgb, lime 100px, red calc(Infinity * 1px)); 27 } 28 .test4 { 29 background: linear-gradient(to top in srgb, lime 100px, red calc(1px / 0)); 30 } 31 .test5 { 32 background: linear-gradient(to bottom in srgb, lime 100px, red calc(Infinity * 1px)); 33 } 34 </style> 35 <div class="box"> 36 <div class="test1"></div> 37 <div class="test2"></div> 38 <div class="test3"></div> 39 <div class="test4"></div> 40 <div class="test5"></div> 41 </div>