calc-background-linear-gradient-1-ref.html (924B)
1 <!DOCTYPE html> 2 <head> 3 <title>CSS Reference: Support calc() on gradient stop positions</title> 4 <link rel="author" title="Yu-Sian (Thomasy) Liu" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935"> 5 <style type="text/css"> 6 div { 7 width:100px; 8 height:100px; 9 background:red; 10 margin:5px 0 0 5px; 11 float:left; 12 } 13 div#one { 14 background: linear-gradient(lime 0px, lime 90px, blue 90px, blue 100%); 15 } 16 div#two { 17 background: linear-gradient(blue 0px ,green 30px ,red 40px ,white 60px , lime 80px); 18 } 19 div#three { 20 background: linear-gradient(blue 0px ,purple 20px ,red 40px ,blue 60px , lime 80px); 21 } 22 div#four { 23 background: linear-gradient(blue 0px ,green 30px ,red 40px ,blue 60px , yellow 80px); 24 } 25 div#five { 26 background: linear-gradient(red 0px ,green 30px); 27 } 28 </style> 29 </head> 30 <body> 31 <div id="one">1</div> 32 <div id="two">2</div> 33 <div id="three">3</div> 34 <div id="four">4</div> 35 <div id="five">5</div> 36 </body> 37 </html>